Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS or what? Forcing the text split into multiple lines

Tags:

html

css

styling

Forcing the text split into multiple lines when it reaches the maximum width of the #div.

How can I do this? because, if I try to output data with 200 characters without spacing, I get the following:

Result 1 (no spacing):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... 

Result 2 (have one space):

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa (space) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... 

Expected result:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... 

Do I need to use the following?

result+=str.substring(0,200)  "\n"; 

or it is a CSS styling?

like image 793
John Bobs Avatar asked Aug 19 '13 06:08

John Bobs


People also ask

How do you break a sentence into multiple lines in CSS?

We use the word–break property in CSS that is used to specify how a word should be broken or split when reaching the end of a line. The word–wrap property is used to split/break long words and wrap them into the next line.

Which CSS property can help you split these across multiple lines?

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

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.


2 Answers

Applying word-break: break-all; will make the text wrap at whatever character whenever it exceeds it's parent's width, without the need of a space or other type breakpoint.

like image 191
K. V. Suresh Avatar answered Sep 22 '22 06:09

K. V. Suresh


As already stated in the accepted answer use the following:

word-break:break-all; 

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour. (credit: AakashM: see post)

Word-Break Property options (W3Schools):

normal      Default value. Break words according to their usual rules  break-all   Lines may break between any two letters  keep-all    Breaks are prohibited between pairs of letters  initial     Sets this property to its default value. Read about initial  inherit     Inherits this property from its parent element. Read about 

Working Example:

Word-Break W3Schools

like image 37
Dan Beaulieu Avatar answered Sep 23 '22 06:09

Dan Beaulieu