我試圖為一些標(biāo)題設(shè)置最大行數(shù)，但問題是有時一行會以一個破碎的單詞結(jié)束。我需要的是，如果一個詞必須打破，它應(yīng)該完全隱藏，省略號放在前一個詞之后。
此代碼顯示了問題:
#head {
width:300px;
font-size: 20px;
display: -webkit-box !important;
color: #000000 !important;
text-overflow: ellipsis !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}<!DOCTYPE html>
<html>
<div id="head">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
</div>
</html>為了達(dá)到完全隱藏斷詞并將省略號放在前一個詞之后的預(yù)期效果，可以使用JavaScript操作文本內(nèi)容。下面是一個如何修改代碼來實現(xiàn)這一點的示例:
function truncateText(element, maxLength) {
const text = element.innerText;
if (text.length <= maxLength) return;
const truncatedText = text.slice(0, maxLength);
const lastSpaceIndex = truncatedText.lastIndexOf(' ');
element.innerText = truncatedText.slice(0, lastSpaceIndex) + '...';
}
const headlineElement = document.getElementById('headline');
truncateText(headlineElement, 100);#head {
width: 300px;
font-size: 20px;
display: -webkit-box !important;
color: #000000 !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}<div id="head">
<span id="headline">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
</span>
</div>.text-oneline {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 150px;
}<div class="text-oneline">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
</div>