What should I do if the Chinese text in CSS exceeds the div?

The solution to the problem that the Chinese text in CSS exceeds the div is to add overflow, word-break, and word-wrap attributes to the div, and set the attribute values ​​​​to hidden, break-all, and break-word respectively.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

I entered a string of text into the div, but the text content did exceed it, as shown in the figure below:

Now I want to remove the extra text How to do automatic line wrapping as shown in the figure below?

Attributes used:

The overflow attribute specifies what happens when content overflows the element box.

• hidden The content will be trimmed and the remaining content will be invisible.

#word-break attribute specifies the processing method of automatic line wrapping.

• break-all Allows line breaks within words.

The word-wrap attribute allows long content to be automatically wrapped.

• break-word Break lines within long words or URL addresses.

The specific implementation code is as follows:

html:

<div class="dbubble-text">
    nishi shfishfshfscccccccccccccccccccifhsssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
 </div>

css:

.dbubble-text {
display: inline-block;
font-size: 14px;
color: #303030;
line-height: 1.6;
font-family: "微软雅黑";
width: 200px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}

Learning video sharing: css video tutorial

The above is the detailed content of What should I do if the Chinese text in CSS exceeds the div?. For more information, please follow other related articles on the PHP Chinese website!