CSS - text-overflow 属性_CSS 菜鸟教程

CSS text-overflow 属性控制如何向用户显示隐藏的溢出内容。它可以被修剪，具有省略号（'...'），或显示自定义字符串。

此属性通常用于文本可能由于空间有限而被截断的情况，例如在固定宽度的容器或单行文本中。

text-overflow 属性不会导致溢出。您需要指定 CSS 属性 overflow 和 white-space，以导致文本溢出到其容器之外。

overflow: hidden;
white-space: nowrap;

可能的值

clip - 默认值。此关键字值在内容区域限制处截断文本，可能在字符的中间;如果支持，请使用 text-overflow： '' 在字符过渡处进行剪辑。
省略号 − 此关键字值在内容区域内显示省略号（“...”，U+2026 水平省略号），以显示剪裁的文本，减少可见文本并在空间有限时剪裁省略号。
字符串 − 此值允许您指定一个自定义字符串，用作截断文本的指示符。例如，text-overflow： “...”将使用三个点（...）作为指示器。

这仅在Firefox浏览器中有效。

适用于

块容器元素。

语法

 text-overflow: clip | ellipse;

text-overflow 属性采用一个值并为行的末端设置溢出行为，而两个值指示左端和右端的行为，允许使用关键字（剪辑或省略号）或 <string>值。

CSS text-overflow - 一个语法值

以下示例演示了如何使用具有不同值的 text-overflow 属性，包括从左到右和从右到左的文本 -

<html>
<head>
<style>	
	 	body {
	 	 	 display: flex;
	 	 	 justify-content: space-around;
	 	}
	 	p {
	 	 	 width: 200px;
	 	 	 border: 1px solid;
	 	 	 padding: 2px 5px;
	 	 	 white-space: nowrap;
	 	 	 overflow: hidden;
	 	}
	 	.box1 {
	 	 	 text-overflow: clip;
	 	}
	 	.box2 {
	 	 	 text-overflow: ellipsis;
	 	}
	 	.box3 {
	 	 	 text-overflow: "***";
	 	}
	 	.left-right > p {
	 	 	 direction: ltr;
	 	}
	 	.right-left > p {
	 	 	 direction: rtl;
	 	}
</style>
</head>
<body>
	 	<div class="left-right">
	 	 	 <h2>Left to right text</h2>
	 	 	 <h3>clip</h3>
	 	 	 <p class="box1">
	 	 	 	 	Tutorialspoint CSS text-overflow: clip.
	 	 	 </p>
	 	 	 <h3>ellipsis</h3>
	 	 	 <p class="box2">
	 	 	 	 	Tutorialspoint CSS text-overflow: ellipsis.
	 	 	 </p>
	 	 	 <h3>"***" (Open is Firefox to see this effective)</h3>
	 	 	 <p class="box3">
	 	 	 	 	Tutorialspoint CSS text-overflow: "***".
	 	 	 </p>
	 	</div>
	 	<div class="right-left">
	 	 	 <h2>Right to left text</h2>
	 	 	 <h3>clip</h3>
	 	 	 <p class="box1">
	 	 	 	 	Tutorialspoint CSS text-overflow: clip
	 	 	 </p>
	 	 	 <h3>ellipsis</h3>
	 	 	 <p class="box2">
	 	 	 	 	Tutorialspoint CSS text-overflow: ellipsis.
	 	 	 </p>
	 	 	 <h3>"***"</h3>
	 	 	 <p class="box3">
	 	 	 	 	Tutorialspoint CSS text-overflow: "***".
	 	 	 </p>
	 	</div> 	 	
</body>
</html>

CSS text-overflow - 双值语法

以下示例演示如何使用双值语法进行文本溢出，从而允许在文本的开头和结尾使用不同的溢出行为。要查看效果，还需要滚动以隐藏行的开头 -

打开是 Firefox 以查看此示例有效

<html>
<head>
<style>	
	 	p {
	 	 	 width: 200px;
	 	 	 border: 1px solid;
	 	 	 padding: 5px;
	 	 	 white-space: nowrap;
	 	 	 overflow: scroll;
	 	}
	 	.box1 {
	 	 	 text-overflow: clip clip;
	 	}
	 	.box2 {
	 	 	 text-overflow: clip ellipsis;
	 	}
	 	.box3 {
	 	 	 text-overflow: ellipsis ellipsis;
	 	}
	 	.box4 {
	 	 	 text-overflow: ellipsis "***";
	 	}
</style>
</head>
<body>
	 	<h3>clip clip</h3>
	 	<p class="box1">
	 	 	 Contrary to popular belief, Lorem Ipsum is not simply random text.
	 	</p>
	 	<h3>clip ellipsis</h3>
	 	<p class="box2">
	 	 	 Contrary to popular belief, Lorem Ipsum is not simply random text.
	 	</p>
	 	<h3>ellipsis ellipsis</h3>
	 	<p class="box3">
	 	 	 Contrary to popular belief, Lorem Ipsum is not simply random text.
	 	</p>
	 	<h3>ellipsis "***"</h3>
	 	<p class="box4">
	 	 	 Contrary to popular belief, Lorem Ipsum is not simply random text.
	 	</p> 	
	 	<script>
	 	 	 const paras = document.querySelectorAll("p");

	 	 	 for (const para of paras) {
	 	 	 	 	para.scroll(100, 0);
	 	 	 }
	 	</script> 		
</body>
</html>

<< CSS - text-orientation 属性 CSS - text-transform 属性 >>