Home > Article > Web Front-end > How to control no line breaks in css
How to control no line breaks in css
- 藏色散人Original
- 2021-04-19 09:07:0815868browse
How to control the non-breaking of css: first create an HTML sample file; then define some text content in the body; finally, set the value of the white-space attribute in css to nowrap to control the non-breaking of text. Line break.
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
In CSS, you can use the white-space attribute to display text without wrapping; as long as the value of the white-space attribute is nowrap, you can force the text not to wrap.
The white-space attribute specifies how to handle whitespace within the element. It has the following attribute values:
normal: Default. White space is ignored by the browser.
pre: Blank spaces will be retained by the browser. It behaves like the
tag in HTML. <p>nowrap: The text will not wrap. The text will continue on the same line until the <br> tag is encountered. </p><p>pre-wrap: Preserve whitespace sequences, but wrap lines normally. </p><p>pre-line: Combine whitespace sequences but retain newlines. </p><p>[Recommended learning: <a href="https://www.php.cn/course/list/12.html" target="_blank">css video tutorial</a>]</p><p>Example: </p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="nowrap">强制文字不换行！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>Rendering:
The white-space attribute can be used together with the overflow attribute and text-overflow attribute. The text is used without wrapping, and the excess part is hidden and displayed as an ellipsis.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通文本！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
<p class="nowrap">强制文字不换行！！！
这是一些文本。 这是一些文本。 这是一些文本。
</p>
</body>
</html>Rendering:
The above is the detailed content of How to control no line breaks in css. For more information, please follow other related articles on the PHP Chinese website!