Home>Article>Web Front-end> How to wrap beyond the width of css

How to wrap beyond the width of css

藏色散人
藏色散人 Original
2021-04-13 10:48:15 6630browse

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.

How to wrap beyond the width of css

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:

How to wrap beyond the width of css

##1. Automatic wrap

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

2 , limit width and height

// html 
11111111111111111111111111
//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!

Statement:
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