Home >Web Front-end >CSS Tutorial >How to set css automatic line wrapping
How to set up css automatic line break: Use the [word-break] attribute to allow the browser to break a line at any position. The code is [.p3{width:200px;border:1px solid #ccc;word- break: break-all].
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, DELL G3 computer.
How to set up css automatic line break:
Automatic line break attribute, using the word-break
attribute allows the browser to wrap lines at any position
It has three attribute values:
normal
: The default line breaking behavior in the browser
break-all
: Allows line breaks within words
keep-all
: Only half-width spaces or hyphens Perform line breaks
Example:
<style> .p1{ width:200px; border:1px solid #ccc; word-break:normal; } .p2{ width:200px; border:1px solid #ccc; word-break:keep-all; } .p3{width:200px; border:1px solid #ccc; word-break:break-all; } </style> </head> <body> <p class="p1">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p> <p class="p2">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p> <p class="p3">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p> </body>
Rendering:
Related tutorial recommendations:CSS video tutorial
The above is the detailed content of How to set css automatic line wrapping. For more information, please follow other related articles on the PHP Chinese website!