Menu
Why doesn't word wrap property work properly in the example below?
http://jsfiddle.net/k5VET/739/
What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.
The css is :
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-weight: normal; line-height: 18px; width: 238px; height:38px; cursor: pointer; word-wrap:break-word; border:2px solid; } 
377
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page.
If word-wrap: break-all don't work, try also add this:
white-space:normal; work for me with the .btn class in Bootstrap 3
131
Use word-break: break-all;
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-weight: normal; line-height: 18px; width: 238px; height:38px; cursor: pointer; word-break: break-all; border:2px solid; } LIVE DEMO
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
