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

王林
Release: 2023-01-06 11:14:37
Original
6804 people have browsed it

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.

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

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:

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

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

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

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>
Copy after login

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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!