資料結構
網路
關係資料庫管理系統
作業系統
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 次檢視
