Home > Article > Web Front-end > How to force html5 text not to wrap
How to force html5 text not to wrap
- WBOYOriginal
- 2022-06-15 10:38:444627browse
In HTML5, you can use the style attribute together with the "white-space" attribute to set the text to force no line breaks; the style attribute is used to set the style of the element, and the "white-space" attribute is used to specify the white space within the element. How to deal with it, when the "white-space" attribute value is set to nowrap, the text will not wrap until it encounters the "
" tag, the syntax is "
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to force text in html5 not to wrap lines
The white-space attribute specifies how to handle the white space within the element.
normal Default. White space is ignored by the browser.
-
pre White space will be preserved by the browser. It behaves like the
tag in HTML.
nowrap The text will not wrap; the text will continue on the same line until the
tag is encountered.pre-wrap Preserves whitespace sequences, but wraps normally.
pre-line merges whitespace sequences but retains newlines.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div{
width: 120px;
height: 60px;
line-height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="white-space:nowrap">
This is some text. This is some text.
</div>
<div>
This is some text. This is some text.
</div>
</body>
</html>Output result:
(Learning video sharing: css video Tutorial,html video tutorial)
The above is the detailed content of How to force html5 text not to wrap. For more information, please follow other related articles on the PHP Chinese website!