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這一點。

來源

2011-09-24 stephenmurdoch

注意'文字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，這應該適用於您想要的任意多行（您在問題中提及了三個）。

來源

2011-09-24 18:22:33

謝謝，這是一個非常好的技術，謝謝，我試了 – 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; 
}

來源

2017-05-26 16:47:50

CSS文本溢出 - 適用省略號如果文本擴展（N）行

回答

相關問題