CODEWITHSUNDEEP
csswidthfont-size
Kamran Jafari
Kamran Jafari

Reputation: 13

How to not let the text have a new line in case of overflow

I am making a list, which some items of the list are short and some or really ling. I dont want to make a new line if the text is long. I am looking for a way to not let make a new line and just reduce the font size then it can sit in one single line. Something like line-width ?! or what if I want to not show the rest of the text when it goes to next line. So if the text is bigger that a line it just put ... and not show the rest in next line.

Here is what I have done so far:

  .Music li .songName{
    background:url(img/play-button.png) no-repeat left center;
    background-size:40px;
    padding-left:45px;
    float:left;
    padding:5px;
    font-size:40px; 
    text-transform:uppercase;
    font-family: 'Raleway', sans-serif; 
    font-weight:300;
   }

Any idea?

Upvotes: 0

Views: 1153

Answers (1)

mwebber
mwebber

Reputation: 386

In plain css i think its not possible, or it will be not cross-browser compatable(especially IE). so the solutions are with javascript/jQuery. i found this plugin http://fittextjs.com/ which may help you resize the text( havent tried it yet).
Other solution i was thinking about is adding the text in div/span element and measuring the width of it and the parent div, and making the resize on page load(something like this descussion here: http://css-tricks.com/forums/topic/is-it-possible-to-adapt-font-size-to-div-width/) i hope this helps you in your research and fixing your problem :) and here is example from the topic (http://jbdes.net/dev/js/fontsize.html). it must be modified a little

example: if ($("span").width > $("div").width) then do the resizing.

Upvotes: 1

Related Questions