Home > Article > Web Front-end > How to use css white-space attribute

How to use css white-space attribute

青灯夜游Original: 2019-05-27 14:09:075593browse

css The white-space attribute is used to set how to handle white spaces within elements. For example, if white-space: nowrap is set, all line breaks and spaces at the beginning and end of the line will be merged, the text will not wrap, and the text will continue on the same line. Until the
tag is encountered.

How to use the css white-space attribute?

The white-space attribute sets how to handle whitespace within an element.

This attribute declares how to handle whitespace characters in elements during the layout process.

Syntax:

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

Attribute value:

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><strong>Note: </strong>The values pre-wrap and pre-line are new in CSS 2.1. </p><p>Note: Any version of Internet Explorer (including IE8) does not support the attribute value "inherit". </p><p><span style="font-size: 18px;"><strong>css white-space property Example</strong></span></p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<head>
		<style type="text/css">
			.box{
				width: 500px;
				border: 1px solid #000;
				margin-bottom:10px ;
			}
			.p1 {
				white-space: nowrap
			}
		</style>
	</head>

	<body>
		<div class="box">
			<p>
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		<div class="box">
			<p class="p1">
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		
	</body>

</html>

Output:

How to use css white-space attribute

The above is the detailed content of How to use css white-space attribute. For more information, please follow other related articles on the PHP Chinese website!

css html

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 use css transform-origin attributeNext article：How to use css transform-origin attribute

See more

How to use css white-space attribute

Related articles