" tag, and the syntax is ""."/> " tag, and the syntax is "".">

Home >Web Front-end >Front-end Q&A >How to force html5 text not to wrap

How to force html5 text not to wrap

WBOY
WBOYOriginal
2022-06-15 10:38:444681browse

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 "

How to force html5 text not to wrap

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:

How to force html5 text not to wrap

(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!

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