Force line breaks and prohibit line breaks in CSS. Force line breaks in css are prohibited.

Force line breaks and prohibit line breaks in CSS. Force line breaks in css are prohibited.
Forced line feed 1, word-break: break-all; only for English, with letters as the basis for line feed. 2. word-wrap: break-word. It only applies to English and uses words as the basis for line feed. 3. white-space: pre-wrap. It only applies to Chinese characters and forces line breaks. Do not wrap white-space: nowrap; overflow: hidden; text-overflow: ellipsis; there is always a BUG in Jimdo system design, that is, in the main editing area, when you encounter an English or digital string (such as a web site), there is no forced line feed, which causes the page to be broken. When you use IE6 to browse, you will often see misplacement of content, which affects the beauty of the website. On the other hand, for a website with a two-column structure, if the title of some articles is too long, it will automatically wrap the line, which also affects the appearance of the layout.

In CSS, there are forced line breaks and prohibited line breaks.

1. Force line feed

1. word-break: break-all; takes effect only in English and uses letters as the line feed basis.
2. word-wrap: break-word. It only applies to English and uses words as the basis for line feed.
3. white-space: pre-wrap. It only applies to Chinese characters and forces line breaks.

Word-break: break-all and word-wrap: break-word both enable automatic line feed of their containers such as DIV content. The difference between them is:

1. word-break: break-all

Assume that the div width is pixel PX, and its content will be automatically wrapped in pixel PX. If there is a long English word at the end of the line, it will cut off the word, and some parts will be kept at the end of the row, change the other part to the next line.

2. word-wrap: break-word 

The example is the same as above, but the difference is that it will regard the entire word as a whole. If the end width of the row is insufficient to display the entire word, it will automatically put the entire word in the next line, instead of truncating words.

Their respective effects are shown as follows:

<Div style = "width: pixel PX; word-break: break-all;">
The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.
</Div>

The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.

<Div style = "width: pixel PX; word-wrap: break-word;">
The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.
</Div>

The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.

<Div style = "width: pixel PX; white-space: pre-wrap;">
The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.
</Div>

The Jimdo system has always been designed with a BUG, that is, in the main editing area, when an English JimdoJimdo or a digital string (such as a URL) is encountered, no forced line breaks are set, resulting in broken pages, misplacement of content affects the beauty of the website.

Well, the effect we see is as if it was not said, maybe the browser version is different now. Generally, for forced line breaks, use word-wrap: break-word.

2. line feed prohibited

White-space: nowrap; overflow: hidden; text-overflow: ellipsis;

White-space: nowrap; line feed is prohibited.

Overflow: hidden; hides the excess content. Otherwise, the excess content will break the container.

Text-overflow: ellipsis; let the extra content be expressed by ellipsis. But this attribute is mainly used in IE and other browsers. operabrowser uses-o-text-overflow: ellipsis. Firefox does not have this function, and the extra content can only be hidden.

The following shows the effect demonstration:

<Div style = "width: 455px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis;">

Text-overflow: ellipsis; let the extra content be expressed by ellipsis. But this attribute is mainly used in IE and other browsers. operabrowser uses-o-text-overflow: ellipsis. Firefox does not have this function, and the extra content can only be hidden.

</Div>

Iii. CSS line feed code application on Jimdo

1. Force line feed

Zhuge straw hat has effectively solved the problem of forced line breaks on Jimdo. If you are interested, visit http://zhugecaomao.jimdo.com/2010/09/06/jimdo-skill-comment-bolg /.

2. line feed prohibited

The prohibited line breaks are mainly used in the partition structure template. When you add some title content on the sidebar, sometimes the line breaks too much, but it looks bad, for example, the "blog Introduction" on my sidebar is like this:

In addition, some friends like to use "RSS Feed" on the sidebar to call the latest blog, and the same problem may occur, for example:

Next we will discuss the solution.

My "blog Introduction" is manually edited. It uses the UL list and is set in CSS. It is quite convenient to modify the content on the page. To disable line breaks, you just need to modify li In CSS. The specific code is:

Li {float: left; line-height: 22px; padding-left: 0px; width: 235px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden ;}

The red code is added, where width: 235px must be modified based on the specific layout.

For "RSS Feed", you can modify it in the same way. Add the following code in CSS:

. RssFeed {width: 235px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;-o-text-overflow: ellipsis ;}

The modified results are as follows:

If you use a system template and do not directly modify CSS, you can add the CSS code to the "HEAD" of the webpage. The effect is the same. The specific method is as follows:

<Style type = "text/css">
<! --
CSS code
-->
</Style>

CSS forces line breaks, center?

Center The div, and the text-align of the body must be center;
Set the div width, and then white-space: nowrap; overflow: hidden;

How can I use CSS to limit the text of A link to force the line break?

Add word-break: keep-all; white-space: nowrap to the CSS of a. Try it. The previous one takes effect under IE and the latter one takes effect under Firefox and Opera.