Home >Web Front-end >Front-end Q&A >How to control no line breaks in css

How to control no line breaks in css

藏色散人
藏色散人Original
2021-04-19 09:07:0815961browse

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.

How to control no line breaks in css

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:

How to control no line breaks in css

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:

How to control no line breaks in css

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!

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
Previous article:How to quote css imagesNext article:How to quote css images