Home  >  Article  >  Web Front-end  >  How to prevent fonts from wrapping in css3

How to prevent fonts from wrapping in css3

WBOY
WBOYOriginal
2022-03-29 15:10:492565browse

In CSS3, you can use the "white-space" attribute to prevent the font from wrapping. This attribute is used to handle the white space within the element. When the attribute value is set to "nowrap", the font text will not wrap. Continue on the same line until a newline tag is encountered, the syntax is "white-space:nowrap".

How to prevent fonts from wrapping in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to make fonts not wrap in css3

In css, you can use the white-space attribute to force the text not to wrap; usually we use white-space:nowrap to force the text content not to wrap. The text will be displayed on the same line until the
tag is encountered.

The white-space attribute sets or retrieves the text display mode within the object.

Syntax:

white-space : normal | nowrap;

Attribute value:

  • normal: Default. White space is ignored by the browser.

  • nowrap: The text will not wrap. The text will continue on the same line until the
    tag is encountered.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
width: 120px;
height: 60px;
line-height: 20px;
border: 1px dashed #ccc;
margin: 10px;
}
.demo {
white-space: nowrap
}
</style>
</head>
<body>
<div>内容将会不被换行显示</div>
<div class="demo">内容将在一行内强制显示完整</div>
</body>
</html>

Rendering:

How to prevent fonts from wrapping in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to prevent fonts from wrapping in css3. 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