数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在具有隐藏溢出的<span>元素中显示省略号？
<span> 元素是一个通用的容器，没有语义意义。它经常与 style 和 class 属性一起用于网页创作中的样式设置。它还可以用于向独立的文本段添加属性，例如 lang 或 title。
只有在没有其他语义元素可用时才应使用它。<span> 元素类似于 <div> 元素，但 <div> 元素是块级元素，而 <span> 元素是内联元素。以下是语法：
<span class="">Some Text</span>
CSS 简写属性
CSS 简写属性 overflow 指定元素溢出的所需行为——也就是说，当元素的内容太大而无法容纳在其块格式化上下文时——在两个方向上的行为。
语法
element {
overflow: visible | hidden | scroll | auto | inherit;
}
当元素的 overflow 设置为 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 值表示使用省略号或三个点/句点来剪裁或截断文本。它显示在内容区域内，减少了显示的文本量。如果空间不足以显示省略号，则会将其剪裁。
示例
以下示例演示了通过将 text-overflow 的值设置为 ellipsis，在具有隐藏溢出的 span 元素中包含省略号。我们将 <span> 元素的 display 属性设置为“inline-block”。width 指定省略号的位置。我们还将 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 标签中的任何后续行显示省略号。
888 次查看
