Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make a text go onto the next line if it overflows? [closed]

Tags:

css

I tried word-wrap: break-word;, but it separates lines mid word.

like image 725
user784756 Avatar asked Dec 03 '11 18:12

user784756


People also ask

How do I make text go to next line?

In HTML, the <br> element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.

How do I make text automatically go to the next line in CSS?

The word-break property in CSS 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. word-break: break-all; It is used to break the words at any character to prevent overflow.

How do you break a line overflow?

Use word-wrap:break-word; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.

How do you handle overflowing texts?

To have text-overflow property used, the text element must first overflow. This can be done by preventing the element from wrapping the overflowed content to a new line, which can be done by setting white-space: nowrap . Additionally overflow must be set to hidden .


2 Answers

In order to use word-wrap: break-word, you need to set a width (in px). For example:

div {     width: 250px;     word-wrap: break-word; } 

word-wrap is a CSS3 property, but it should work in all browsers, including IE 5.5-9.

like image 92
Serina Patterson Avatar answered Sep 24 '22 21:09

Serina Patterson


As long as you specify a width on the element, it should wrap itself without needing anything else.

like image 39
Tieson T. Avatar answered Sep 22 '22 21:09

Tieson T.