CSS文本溢出 - 适用省略号如果文本扩展（N）行

问题描述：

我用下面的代码，以防止文本溢出到一个新行：CSS文本溢出 - 适用省略号如果文本扩展（N）行

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

这工作，符合市场预期，但这个盒子里有三行的空间。如果文本超出第三行，我如何命令浏览器应用elipsis？或者文本溢出只能处理一个？

我probs不会打扰，如果我需要JS这一点。

注意'文字overflow'不工作在Firefox。 –

@rfusak - 它将在Firefox 7中发布，现在应该很快发布（请参阅http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5了解更多信息） – Spudley

答

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

在div的开头添加<span>...</span>。

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

在你的CSS

摆脱nowrap和text-overflow
添加一些padding-right
位置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/

FYI ...会出现在左上角，这里的省略号应该是一个小的差距（因为我们正在使用position:relative;。

fyi 2 ...如果您调整了top和left，这应该适用于您想要的任意多行（您在问题中提及了三个）。

谢谢，这是一个非常好的技术，谢谢，我试了 – stephenmurdoch

这是不是一个解决方案，当你有机会不完全填充文本行。 – Eduardo

答

我知道这是一个古老的问题，但我发现这个修复程序，它适用于我。

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; 
}

CSS文本溢出 - 适用省略号如果文本扩展（N）行

相关推荐