相关疑难解决方法(0)

同

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

如果溢出,"......"将显示在行尾.但是,这只会在一行中显示.但我希望它以多行显示.

它可能看起来像:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

我已经限制了Bootstrap中缩略图框内文本区域的高度,但是在标题是两行或更多行的情况下,它会将文本的最后一行垂直切成两半.看这里:

http://www.bootply.com/zBXG6in5R5

由于文本框有两种字体大小(标题较大,描述较小,动态且长度不同),设置行高无济于事.溢出:隐藏不会隐藏整行文本,只会溢出溢出的部分.添加文本溢出:省略号或类似不会阻止半行显示.

我已经回顾了以前的这些帖子,但它们似乎没有提供适用于我的案例的答案:

• 我可以完全隐藏半截断的文本行吗？

• 句子在div的末尾显示一半,溢出:隐藏正在削减句子

我已经提到过Bootstrap,以防任何人在使用他们的缩略图类时找到解决方案,但这确实是一个更普遍的问题.有没有办法阻止切线高度发生,最好是在CSS？

谢谢!

编辑:对于那些不想要bootply链接的人,这是我的CSS:

.container {
  margin-top: 20px;
}

.thumbnail .caption h3 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.thumbnail-text {
  overflow: hidden;
  height: 160px;
  margin-bottom: 10px;
}

和HTML:

    <div class="col-sm-4 col-md-3">
      <div class="thumbnail">
        <img src="http://lorempixel.com/300/160/animals/">
        <div class="caption">
          <div style="clear: both;"></div>
          <div class="thumbnail-text">
            <h3>This Title is Two Lines Long</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae …