我基本上有這段代碼（在 React 中）：
const clampStyling = {
display: '-webkit-box',
WebkitLineClamp: lines,
webkitBoxOrient: 'vertical',
overflow: 'hidden',
textOverflow: 'ellipsis',
};
<div style={clampStyling}>20 lines worth of text...</div>
當有超過 15 行的文本（lines等于 15）時，div 正確顯示省略號并且是 15 行高。但是，當它的內容長度只有 5 或 10 行，并且lines仍然是 15 時，它只會填充最多 5 或 10 行的區域（div 只有那么高）。
我如何使 div 總是 15 行高，無論它有多少內容？
uj5u.com熱心網友回復：
添加 height: 15em;到您的 CSS。
uj5u.com熱心網友回復：
如果我正確理解這一點，您<div>總是希望高度為行高的15 倍（無論 中存在多少行div）。
為此首先定義一條線的高度。
現在將<div>高度定義為，height = 15 * line height
.clampStyling {
display: -webkit-box;
Webkit-line-clamp: 15;
webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em; /* Define height of line */
height: 15em; /* height of div = 15 * lineheight */
background-color: #ccc;
}<div class="clampStyling">
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.
</div>uj5u.com熱心網友回復：
使用相對單位“em”，
em ：元素的字體大小。
對于 15 行高度：
height: 15em;
請參閱此鏈接：https : //www.w3schools.com/cssref/css_units.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/416454.html
標籤：