CSS forced line wrapping and no line break learning

Forced line break 1, Word-break:break-all;      Only works in English, with letters as the basis for line-wrapping.   2, Word-wrap:break-word;      Only works in English, with words as the basis for line change.     3, White-space:pre-wrap; Only works on Chinese, forcing line wrapping. No line-wrapping white-space:nowrap; Overflow:hidden; Text-overflow:ellipsis; http://jdm.jimdo.com/2010/09/25/css/

Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English or digital string (such as URL), there is no forced line-wrapping, resulting in the page burst, with IE6 browsing, often see the content dislocation, very affect the beauty of the site. On the other hand, the two-column structure of the site, in the sidebar to put some article title, if the title is too long it is automatically wrapped, also affect the appearance of the layout.

In CSS, there are mainly forced line breaks and no wrapping.

First, forced line break

1, Word-break:break-all; Only works in English, with letters as the basis for line-wrapping.
2, Word-wrap:break-word; Only works in English, with words as the basis for line change.
3, White-space:pre-wrap; Only works on Chinese, forcing line wrapping.

Both Word-break:break-all and Word-wrap:break-word are able to wrap the contents of their containers, such as Div, in the following different lines:

1, Word-break:break-all

Assuming that the div width is 450px, its contents will go to 450px wrap, if there is a long English word at the end of the line, it will truncate the word, part of the end of the row, and 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 sees the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it automatically puts the whole word on the next line without truncating the word.

The respective effects are demonstrated as follows:

<div style= "width:450px; Word-break:break-all; " >
Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.
</div>

Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.

<div style= "width:450px; Word-wrap:break-word; " >
Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.
</div>

Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.

<div style= "width:450px; White-space:pre-wrap; " >
Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.
</div>

Jimdo system in the design has always been a bug, that is, in the main editing area, encountered in English Jimdojimdo or digital strings (such as URLs), there is no forced line-wrapping, resulting in the page burst, content dislocation, very affect the beauty of the site.

Hehe, we see the effect, as if not said, may be now the browser version is different. Generally, for forced line change, with Word-wrap:break-word; You can do it.

Ii. Prohibition of line breaks

White-space:nowrap; Overflow:hidden; Text-overflow:ellipsis;

White-space:nowrap; is to prohibit line breaks.

Overflow:hidden; is to let the extra content hidden, otherwise the content will burst the container.

Text-overflow:ellipsis; Let the extra content to ellipsis ... To express. But this attribute is mainly used in IE and other browsers, opera browser with-o-text-overflow:ellipsis; And the Firefox browser does not have this function, the more content can only be hidden.

Here's a look at the effect:

<div style= "WIDTH:455PX;WHITE-SPACE:NOWRAP; Overflow:hidden; Text-overflow:ellipsis; -o-text-overflow:ellipsis; ">

Text-overflow:ellipsis; Let the extra content to ellipsis ... To express. But this attribute is mainly used in IE and other browsers, opera browser with-o-text-overflow:ellipsis; And the Firefox browser does not have this function, the more content can only be hidden.

</div>

Third, the application of CSS wrapping code on JIMDO

1. Forced line break

On Jimdo on the issue of forced line, GE Straw hat has been a good solution to this problem, interested friends can go to see, specific address: http://zhugecaomao.jimdo.com/2010/09/06/jimdo-skill-comment-bolg/.

2. No Line break

Prohibit line wrapping is mainly used for the column structure of the template, in the sidebar to add some of the title of the content, sometimes too much content to line-up is not beautiful, as I said in the sidebar "blog Guide" Is this:

In addition, some friends like to use the "RSS feed" in the sidebar to call the latest blog post, will also appear the same problem, such as:

Here's a discussion of how to solve it.

I This "blog guide" is manually edited, with a UL list, in the CSS set it up, on the page to modify the content is quite convenient. To prohibit line wrapping, just modify the Li in the 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 main is to add a red code, where width:235px to be based on the specific layout to modify.

For the "RSS feed", you can use the same method to modify, add the following code in the CSS:

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

Modify the effect as follows:

If you are using a system template, it is not convenient to modify the CSS directly, you can add the CSS code to the page "HEAD", the effect is the same, the specific method is:

<style type= "Text/css" >
<!--
CSS Code
-
</style>

You can leave a message if you are not sure, I will try my best to reply.