How to use css white-space attribute-CSS Tutorial-php.cn

How to use css white-space attribute

青灯夜游

Release： 2019-05-27 14:09:07

Original

5622 people have browsed it

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 css white-space attribute

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 ;

Copy after login

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

Copy after login

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!