如何让我的文字填充给<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文字扩大了呢？就这样我清楚你的问题不太清楚？ –
编辑的问题要更清楚了（卡片是固定高度，文本应该被截断） –
让你让我看看 –