HTML elements include Chinese, English, symbols, and numbers. The solution to the automatic line break if the first line is not full: the use of word-break:break-all

word-break: break-allis a CSS property that controls how text wraps within a container. What it does is force a newline between arbitrary characters, even if doing so might cause the word to be split.

Specifically, word-breakthe attribute has the following values:

1. normal(default): The default newline behavior. Words are not split and wrap automatically according to the width of the container.

2. break-all: Forces a newline between arbitrary characters, even if it might cause words to be split. This value is suitable for languages ​​that do not consider word boundaries, such as Chinese, Japanese, etc.

3. keep-all: Do not allow newlines within words, only between characters. This value is suitable for languages ​​that consider word boundaries, such as English.

Use to word-break: break-allforce line breaks when needed, even though this may result in words being split. This is useful for some specific layout needs, such as when displaying long text in a narrow container. But be aware that this may destroy the readability of the text, as words may be difficult to understand after being segmented. Therefore, word-break: break-allreadability and layout needs need to be carefully weighed when using .

1. Basic concepts

word-break:break-all is an attribute in CSS3, which is used to control how to deal with the line break of Chinese characters inside the element. This attribute can make long words or URLs wrap automatically and keep complete words or URLs.

Two, CSS settings

In CSS, setting word-break:break-all can achieve a text truncation effect in the "adaptive" layout. The following is how to set word-break:break-all:

{
    word-break: break-all;
}

When the attribute value is set to break-all, CSS stipulates that the string can break at any character, that is, there is no hard limit.

3. Application scenarios

1. Automatically wrap long articles

For a very long Chinese article, if the word-break:break-all attribute is not set, the long words or URLs in the article cannot automatically wrap, which will make the reading experience of the article very poor.

For example, there is a long URL link in the article, because it is too long, word-break:break-all is not set, causing the link to overflow the parent element.

div{
    width: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
}
a{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

If the above code is changed to

div{
    width: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
    word-break: break-all;
}
a{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

When it exceeds 200px, the long URL link will automatically wrap and keep the full word instead of truncating the link and displaying an ellipsis.

2. Improve table style

When the content of the table is too long, if the word-break:break-all attribute is not set, the layout of the table will be disordered because the content of a certain cell is too long. In some cases, this attribute can also help us solve the problem of table layout.

table{
    max-width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}
td{
    border: 1px solid #ccc;
    padding: 5px;
}

If the above code is changed to

table{
    max-width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
}
td{
    border: 1px solid #ccc;
    padding: 5px;
    word-break: break-all;
}

When the content of a row cannot be fully displayed, automatic line wrapping retains the complete word, instead of involving other cells and causing the table layout to be disordered.

Four. Summary

In CSS, setting word-break:break-all can achieve a text truncation effect in adaptive layout, which is suitable for adaptive layout of long text and optimization of table style.