Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS [duplicate]

Tags:

css

Possible Duplicate:
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML

Lets say one has the following code:

<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div> 

I apologize but stack overflow (according to the preview) does not line break code snippets.

Under most (?) circumstances, the following will cause the container that holds the long line of text to stretch to the full width of the text contained within.

We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container.

Is this possible via a css tag I do not know about?

IE6+ comparability, plus gecko/webkit/opera please.

like image 960
anonymous-one Avatar asked Jul 22 '12 11:07

anonymous-one


People also ask

How do you break a long text in CSS?

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.

How do you break a word without space in CSS?

You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.

How do you force text wrap in CSS?

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.

How do you do a line break in CSS?

Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Output: Line-break between HTML Elements: The line-break between HTML elements can be added by using CSS properties.


2 Answers

You can use this to wrap :

.wrap {     white-space: pre-wrap;      /* CSS3 */       white-space: -moz-pre-wrap; /* Firefox */        white-space: -pre-wrap;     /* Opera <7 */       white-space: -o-pre-wrap;   /* Opera 7 */        word-wrap: break-word;      /* IE */ } 
like image 52
Mr. Alien Avatar answered Sep 20 '22 16:09

Mr. Alien


A combination of word-wrap and word-break may solve this for you. See How to force a line break in a loooooong word in a DIV? (possible dupe)

like image 45
Paul Fleming Avatar answered Sep 22 '22 16:09

Paul Fleming