white-space 標籤使用

時間 2019-12-08

標籤 white space 標籤使用简体版

原文原文鏈接

white-space MSD定義爲：是用來設置如何處理元素中的空白

其使用場景有不少，好比：橫向滑動，超出顯示省略號，輸出空格顯示空格等css

1.橫向滑動　

在寫手機頁面的過程當中，我想大部分人都遇到橫向滑動的問題，今天咱們就來討論一下橫向滑動，其css核心爲：white-space、html

　　１.首先定義一個父容器寬度，ui

　　 2.設置子元素個數，使其超過父容器寬度spa

　　 3.父元素設置white-space：nowarp， overflow：hidden或 overflow-y：hidden便可htm

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css實現圖片橫向排列，溢出隱藏橫向滾動</title>
<style type="text/css">
	.box{width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
	.box span{display: inline-block;width: 600px;height:395px;background-color: red;}
</style>
</head>
<body>
<div class="box">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
</body>
</html>

　　以下圖

2.超出顯示省略號

　　原理：1. 先讓父元素設置超出隱藏，overflow：hidden。2.再設置 white-space 強制不換行。3. text-overflow: ellipsis 超出顯示省略號blog

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>white-space</title>
<style type="text/css">
	.con {width: 500px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
</style>
</head>
<body>
<p class="con">
	簡單之美是透着一種禪意，如天上輕盈的白雲，隨緣自在；如花中純白，清新淡雅；如冬雪初落，純潔通透；如畫中留白，給人以想象。簡單，純粹而通透，自然而不加雕琢。
</p>
</body>
</html>