11

我正在使用以下代码来防止文本溢出到新行:

.info-box{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  height: 3em;
  width: 300px;
  font-size: 1em;
  line-height: 1em;
}

正如预期的那样,这有效,但此框中有三行的空间。如果文本超出第三行,我如何命令浏览器应用省略号?还是文本溢出仅适用于一个?

如果我为此需要 JS,我可能不会打扰。

4

2 回答 2

5

你可以像这样使用 CSS 来伪造它。

<span>...</span>在开头添加一个div

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div>

在你的 CSS

  1. 摆脱nowraptext-overflow

  2. 添加一些padding-right

  3. span向下放置在右下角。

CSS

.info-box{
    overflow:hidden;  
    height: 3em;
    width: 300px;
    font-size: 1em;
    line-height: 1em;
    padding-right:20px;
}

.info-box span{
    position:relative;
    top:31px;
    left:297px;
    display:inline-block;
}

工作示例:http: //jsfiddle.net/jasongennaro/UeCsk/

仅供参考......左上角会有一个小间隙,省略号应该在哪里(因为我们使用position:relative;.

fyi 2top ...只要您调整and ,这应该适用于您想要的任何行(您在问题中提到了三个)left

于 2011-09-24T18:22:33.570 回答
0

我知道这是一个老问题,但我找到了这个修复程序,它对我来说很好。

https://codepen.io/martinwolf/pen/qlFdp

    @import "compass/css3";

/* Martin Wolf CodePen Standard */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}

/* END Martin Wolf CodePen Standard */


$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
于 2017-05-26T16:47:50.973 回答