使用文本溢出截断多行文本：省略号

Question

我怎样才能让我的文本填满给定 <p> 标签的 space，然后用省略号将其截断？

您可以在此处查看 "card" 的示例，该示例旨在用文本填充。卡片的高度固定，150 像素，内边距为 20 像素。段落元素在卡片内只有固定数量的space，不应该展开。使用 space 时应截断文本：https://jsfiddle.net/os986qsg/1/

从关于 SO 的其他问题来看，具有 text-overflow: ellipsis 的元素也需要 text-wrap: nowrap。此解决方案仅在您需要 1 行文本时才可接受。在这种情况下，我想要多行文本，然后在文本到达其垂直 space.

末尾时截断

Answer 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>

编辑

This is only supported on Chrome and 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>

Answer 2

Clamp.js 是一种有效的 javascript 解决方案。 https://github.com/josephschmitt/Clamp.js/

这是一个如何使用它的例子：

// Get the DOM node.
var myParagraph = $('.myParagraph')[0];

// Clamp it.
$clamp(myParagraph, { clamp: 3 });

编辑：在 Firefox 中不起作用

使用文本溢出截断多行文本：省略号

Cutoff multiple lines of text with text-overflow: ellipsis

css

overflow