如何設定段落的字數限制？

我的一些段落有很長的描述，我只想把前 30 個單詞寫成兩行。這如何在 HTML、CSS 或 JS 中實作？我嘗試使用下面的代碼，但它不是文字，這會在一行中顯示。

.long-text{
  width: 70ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<p class ="long-text">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is </p>

uj5u.com熱心網友回復：

這是無法使用 CSS 實作的。為此，您需要使用 JS。下面的代碼將段落限制為 30 個單詞，并在最后添加“...”。（此代碼通過將段落中的文本按空格分隔來獲取單詞。）

var para = document.getElementsByClassName("long-text")[0];
var text = para.innerHTML;
para.innerHTML = "";
var words = text.split(" ");
for (i = 0; i < 30; i  ) {
  para.innerHTML  = words[i]   " ";
}
para.innerHTML  = "...";

<p class="long-text">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is </p>

uj5u.com熱心網友回復：

.long-text {
  inline-size: 150px;
  overflow-wrap: break-word;
}

來源：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text

應該可以，但我現在無法測驗。

uj5u.com熱心網友回復：

CSS

你不能限制字數，但你可以做一些黑客數學，其中：

• 最大寬度為 80 個字符
• 最多 2 行文本
• 總共應該給你大約 30 個字

.container {
  max-width: 80ch;
  padding: 20px;
  border: 1px solid #fed;
}

.container p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div class="container">
  <p>Aenean vulputate libero a purus posuere, eget rhoncus risus iaculis. Aenean non turpis diam. Ut pretium sagittis porttitor. Curabitur placerat interdum lobortis. Aliquam non laoreet risus. Donec eget ornare nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sed sapien augue. Suspendisse pharetra venenatis nunc. Maecenas interdum placerat felis vitae fringilla. Pellentesque a mollis justo.</p>
</div>

JS

僅顯示 30 個單詞，或最多 2 行。

var string = "Aenean vulputate libero a purus posuere, eget rhoncus risus iaculis. Aenean non turpis diam. Ut pretium sagittis porttitor. Curabitur placerat interdum lobortis. Aliquam non laoreet risus. Donec eget ornare nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sed sapien augue. Suspendisse pharetra venenatis nunc. Maecenas interdum placerat felis vitae fringilla. Pellentesque a mollis justo."

var exploded = string.split(" ")


document.getElementById("target").innerHTML =exploded.slice(30).join(" ")

div{
border:1px solid #fed;
padding:5px;
}

p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

<div><p id="target"></p></div>

uj5u.com熱心網友回復：

您好，這個JS示例應該可以很好地解決您的問題：

var str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
parts = str.split(' '),
outStr = '';
count = 0;

//Combine each word
for (var i = 0; i < parts.length; i  ) {
 //cicle and do things only on the first 2 lines
 if(count<2){
  outStr  = ' '   parts[i];
  
  //every fifteenth word, add a new-line
  if ((i   1) % 15 === 0) {
    count   ;
    //on the second row avoid new-line
    if(count!=2){
     outStr  = "\n";
    }
  }
 }
}
//add 3 points at the end of the string
console.log(outStr '...');

標籤：html css

上一篇：具有邏輯的可重用樣式組件（偽元素）

下一篇：更改MUI禁用輪廓輸入的邊框顏色