极客笔记如何在具有隐藏溢出的元素中显示省略号
<span> 元素是一个没有语义意义的通用容器。它经常用于Web制作中进行样式设计，以及样式和类属性的使用。还可以将属性添加到孤立的文本span中，例如lang或title。
仅在没有其他语义元素可用时使用它。<span>元素类似于<div>元素，但<div>元素是块级元素，而<span>元素是内联元素。以下是语法-
<span class="">Some Text</span>
CSS的简写属性
CSS的简写属性overflow指定元素溢出的期望行为，即当元素的内容在其块级格式上下文中太大而无法适应时，以两个方向进行处理。
语法
element {
overflow: visible | hidden | scroll | auto | inherit;
}
当元素的溢出设置为 hidden 时，如果需要，内容将被剪切以适应内边距框。没有滚动条，也不支持用户通过拖动或使用滚动轮来滚动。因为内容可以通过编程的方式滚动（例如，通过设置scrollLeft属性的值或调用scrollTo()方法），所以元素仍然是一个滚动容器。
省略号 是一种标点符号，表示暂停或有意留下某些内容。它由三个点或句号组成。它可以与具有隐藏溢出的元素一起使用，以实现清晰的布局和更好的截断。
在本文中，我们将介绍一种在具有隐藏溢出的span元素中显示省略号的方法。
使用text-overflow属性
当一串文本超出容器的边界时，它可能会破坏整个布局。text-overflow属性指定如何向用户显示未显示的溢出内容。它可以被剪切，用省略号(…)表示，或显示自定义字符串。
text-overflow需要同时具有以下两个属性： overflow: hidden 和 white-space: nowrap 。
以下是语法：
text-overflow: clip|ellipsis|string|initial|inherit;
text-overflow的ellipsis值代表通过省略号或三个点/句号来剪裁或截断文本。它出现在内容区域内，减少显示的文本量。如果空间不足以显示省略号，则会将其剪裁。
示例
以下示例演示了在具有隐藏溢出的span元素中包含省略号的方式，通过将text-overflow的值设置为ellipsis。我们将<span>元素的display属性设置为”inline-block”。宽度指定了省略号的位置。我们还使用white-space属性与”nowrap”值结合使用，以防止内容换行到下一行。
<!DOCTYPE html>
<html>
<head>
<title>
How to Display Ellipsis in the span Element Having Hidden Overflow?
</title>
<style>
span {
background-color:peachpuff;
color:darkslategrey;
border:2px solid sienna;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:450px;
height:20px;
margin:10px;
padding:2px 3px 4px 5px;
display:inline-block;
}
</style>
</head>
<body>
<h3>Something to think about</h3>
<span>
The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
</span>
</body>
</html>
示例
在这个特定的示例中，我们在第二行的末尾的<span>标签中显示省略号。这是根据上一个示例进行的变化，增加了一些属性，如-webkit-line-clamp，它允许将块容器的内容限制在指定的行数上，并且-webkit-box-orient，它可以决定元素是水平还是垂直布局其内容。
<!DOCTYPE html>
<html>
<head>
<title>
How to Display Ellipsis in the span Element Having Hidden Overflow?
</title>
<style>
span {
display: inline-block;
background-color:lavenderblush;
color:purple;
font-weight:550;
border: 3px solid thistle;
margin:10px;
padding: 2px 3px 4px 5px;
width: 250px;
height: 50px;
-webkit-line-clamp: 2;
display: -webkit-box;
line-height: 1.50;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h3>Something to think about</h3>
<span>
The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
</span>
</body>
</html>
通过修改-webkit-line-clamp属性，我们可以在span标签的任何连续行上显示省略号。