How to wrap beyond the width of css

How to implement css line wrapping beyond the width: 1. Use "word-wrap: break-word" to realize automatic line wrapping; 2. Use "overflow:hidden" to limit the width and height to achieve the effect of line wrapping beyond the width.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css settings automatically wrap when the width is not enough

As shown in the figure:

##1. Automatic wrap

// html 
<div>111111111111111111111111</div>
// css
widht:100%;
height:100%;
word-wrap: break-word

2 , limit width and height

// html
<div>11111111111111111111111111</div>
//css 
widht:100px;
height:100px;
overflow:hidden // 如果想让元素可以滚动，设置为auto即可

(Note: If the div is placed in li, you need to add the display: inline-block attribute)

[Recommended learning:

css video tutorial 】

The above is the detailed content of How to wrap beyond the width of css. For more information, please follow other related articles on the PHP Chinese website!