如何讓我的文字填充給<p>標記的空間，然後用省略號將它剪掉？截取文本溢出的多行文字：省略號
你可以在這裏看到一個「卡片」的例子。該卡片是固定高度，150px，填充20px。段落元素在卡內只有一個固定的空間量，它不應該擴展。當使用該空間時，文本應該被截斷：https://jsfiddle.net/os986qsg/1/
從SO上的其他問題，與text-overflow: ellipsis的元素也需要text-wrap: nowrap。如果您需要1行文本，此解決方案僅可接受。在這種情況下，我需要多行文本，然後在文本到達其垂直空間的末尾時進行截取。
您可以使用webkit-line-clamp屬性 - 此屬性允許您只顯示您需要的行，以便您可以將6或2等等由您決定。下面的例子：
.card {
width: 400px;
height: 150px;
background: white;
border: 1px solid #EAEAEA;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.18);
padding: 20px;
}
h4 {
margin: 0;
}
p {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}<div class="card">
<h4>Test</h4>
<p>
A test or examination (informally, exam) is an assessment intended to measure a test-taker's knowledge, skill, aptitude, physical fitness, or classification in many other topics (e.g., beliefs).[1] A test may be administered verbally, on paper, on a computer, or in a confined area that requires a test taker to physically perform a set of skills. Tests vary in style, rigor and requirements. For example, in a closed book test, a test taker is often required to rely upon memory to respond to specific items whereas in an open book test, a test taker may use one or more supplementary tools such as a reference book or calculator when responding to an item.
</p>
</div>編輯
這是僅支持Chrome和Safria
你可以試試這個這是全球範圍內的支持，我們使用:before和:after元素來操作p標籤
.card {
width: 400px;
height: 150px;
background: white;
border: 1px solid #EAEAEA;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.18);
padding: 20px;
}
h4 {
margin: 0;
}
p {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 112px;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
p:before {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
p:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}<div class="card">
<h4>Test</h4>
<p>
A test or examination (informally, exam) is an assessment intended to measure a test-taker's knowledge, skill, aptitude, physical fitness, or classification in many other topics (e.g., beliefs).[1] A test may be administered verbally, on paper, on a computer, or in a confined area that requires a test taker to physically perform a set of skills. Tests vary in style, rigor and requirements. For example, in a closed book test, a test taker is often required to rely upon memory to respond to specific items whereas in an open book test, a test taker may use one or more supplementary tools such as a reference book or calculator when responding to an item.
</p>
</div>感謝您發現這一點。瞭解其跨瀏覽器兼容性？ –
適用於Chrome，Safria不支持IE或FF ..讓我找出另一個可以使用的解決方案。 –
編輯@DonnyP請測試，希望這可以幫助您 –
Clamp.js是一種有效的JavaScript的解決方案。 https://github.com/josephschmitt/Clamp.js/
這裏是如何使用它的一個例子：
// Get the DOM node.
var myParagraph = $('.myParagraph')[0];
// Clamp it.
$clamp(myParagraph, { clamp: 3 });
編輯：在Firefox
所以不工作，你希望你的卡類與p文字擴大了呢？就這樣我清楚你的問題不太清楚？ –
編輯的問題要更清楚了（卡片是固定高度，文本應該被截斷） –
讓你讓我看看 –