1

i have

HTML file

  <div>
    <p class="ellipsis"> Some randomly generated text</p>
  </div>

LESS(CSS) file 

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

I need my paragraph width to be not more then parent div width. Parent div width is based on browser window. So it may change all time. Also randomly generated text can be from 1 to 1000 symbols.

Andrew_someNumber
  • 13
  • 6

1 Answers1

0

This is what you want? Fiddle

As you can see, is a "responsive" solution.

CSS

.ellipsis {
    word-wrap: break-word;
    border: 1px solid black; /* This is not required. Is only for seeing the box */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  • word-wrap: break-word; "is used to "tell" to the browser that breaks lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box." - Check this MDN article.

Try to resize the "result panel" in the fiddle and you'll see that the text is bounded to the "parent's width".

Cheers, Leo!

leoMestizo
  • 1,469
  • 9
  • 15
  • Unfortunately i need only 1 line and "..." at the end of it. And your answer don't do it. Andrea Ligios in comments above got an example of how it should work. – Andrew_someNumber Sep 09 '13 at 16:41
  • Ohh! I didn't understand that! Check this [**update**](http://jsfiddle.net/xySPx/2/). – leoMestizo Sep 09 '13 at 16:43
  • Well as you can see it didn't cut. I guess it's all about bootstraps resizing. It kinda have low priority. In your example is the problem. It won't start cutting. – Andrew_someNumber Sep 09 '13 at 16:46
  • Sorry, but I don't understand you... As I can see my solution works. Do you say that in your web site/web page my solution doesn't work? If so, please create a [jsfiddle](http://jsfiddle.net) with your entire code. Besides, you have said that you are using Twitter Bootstrap? – leoMestizo Sep 09 '13 at 16:48
  • Yes. I am using Twitter Bootstrap. – Andrew_someNumber Sep 09 '13 at 16:56
  • Ok, please add a fiddle for all of us can help you (because it's possible that the CSS rules from Tw Bootstrap are in conflict with your CSS rules. If you want to add Tw Bootstrap in the fiddle check [this](http://stackoverflow.com/questions/17478396/external-resources-in-jsfiddle-adding-twitter-bootstrap-cdn)). I think that you can add `!important` to your CSS rules for they have more priority, but is a [bad technique](http://stackoverflow.com/questions/13743671/is-important-bad-for-performance). You can add specific styles in your HTML elements too for gain more priority, too. – leoMestizo Sep 09 '13 at 17:00
  • I kinda asked some colleague and they say that bootstrap is using something equal to width: 25% but in my case it have lower priority then paragraph. They advised me to reconstruct all page ... Thank you for trying to help. I guess i had to reconstruct this page from beginning. Of course i can use !important but as u said it's bad bad technique. – Andrew_someNumber Sep 09 '13 at 17:09