Home  >  Article  >  Web Front-end  >  How to set css automatic line wrapping

How to set css automatic line wrapping

coldplay.xixi
coldplay.xixiOriginal
2021-03-02 10:52:5012120browse

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].

How to set css automatic line wrapping

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:

How to set css automatic line wrapping

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!

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