第二行的css省略號

Question

第二行的CSS text-overflow: ellipsis，這可能嗎？我無法在網上找到它。

例如：

我想是這樣的：

I hope someone could help me. I need 
an ellipsis on the second line of... 

，但發生的事情是這樣的：

I hope someone could help me. I ... 

Answer 1

一種text-overflow: ellipsis;工作的要求是單行版本white-space（pre,nowrap等）。這意味着文本將永遠不會到達第二行。

Ergo。在純CSS中不可能。

時，我一直在尋找同樣的事情只是我現在的源：http://www.quirksmode.org/css/textoverflow.html（怪異模式FTW！）

編輯如果好的CSS神將實施http://www.w3.org/TR/css-overflow-3/#max-lines我們可以使用fragments純CSS HAZ這個（新）和max-lines（新）。同樣在http://css-tricks.com/line-clampin/

EDIT 2的WebKit /眨眼一些更多的信息有line-clamp：-webkit-line-clamp: 2將會把省略號在2號線。

Answer 2

這是一個非標準的CSS，這是不包括在當前版本的CSS（Firefox不支持它）。嘗試使用JavaScript代替。

Answer 3

我以前使用過jQuery-condense-plugin，看起來它可以做你想做的。如果沒有，則有different plugins可能適合您的需求。

編輯：使你成爲demo - 注意，我聯繫上確實神奇演示了jquery.condense.js，所以充分肯定該插件:)筆者

Answer 4

多麼可惜，你不能讓它在兩行工作！如果元素是顯示塊並且高度設置爲2em或者其他東西，並且當文本溢出時它會顯示省略號！

對於單襯你可以使用：

.show-ellipsis { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

多行，也許你可以使用填充工具如jQuery autoellipsis這是在github http://pvdspek.github.com/jquery.autoellipsis/

Answer 5

我不是JS親，但我想出了一些方法可以做到這一點。

的HTML：

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p> 

然後用jQuery您截斷它歸結爲一個特定的字符數，但留下的最後一句話是這樣的：

// Truncate but leave last word 
var myTag = $('#truncate').text(); 
if (myTag.length > 100) { 
    var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…"; 
    $('#truncate').text(truncated); 
} 

結果看起來是這樣的：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi
elementum consequat tortor等...

或者，你可以簡單地截斷它歸結爲一個特定的字符數是這樣的：

// Truncate to specific character 
var myTag = $('#truncate').text(); 
if (myTag.length > 15) { 
    var truncated = myTag.trim().substring(0, 100) + "…"; 
    $('#truncate').text(truncated); 
} 

結果看起來是這樣的：

的Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi
elementum consequat tortor等euismod ...

希望有點幫助。

這裏是jsFiddle。

Answer 6

我以前遇到這個問題，並沒有純CSS的解決方案

這就是爲什麼我有developped一個小型圖書館，以解決這個問題（等等）。該庫提供對象來建模和執行字母級別的文本渲染。例如，您可以模擬文本溢出：具有任意限制的省略號（不需要一行）

有關屏幕截圖，教程和下載鏈接的更多信息，請參見http://www.samuelrossille.com/home/jstext.html。

Answer 7

正如其他人已經回答，純粹的CSS解決方案不存在。 有一個很容易使用的jQuery插件，它被稱爲dotdotdot。 它使用容器的寬度和高度來計算是否需要截斷和添加省略號。

$("#multilinedElement").dotdotdot(); 

這是jsFiddle。

Answer 8

這應該在WebKit瀏覽器工作：

overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; 

Answer 9

我找到了，但是你需要知道一個粗略的字符長度，將適合您的文本區域解決方法，然後加入...到先於空間。

我這樣做的方法是：

1. 假設一個粗略的字符長度（在這種情況下200），並傳遞給 功能與文字一起
2. 分裂的空間讓你有一個長串
3. 使用jQuery獲得片中的第一「」空間你的性格 長度
4. 加入剩餘的後...

代碼：

truncate = function(description){ 
     return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";   
} 

這裏是一個小提琴 - http://jsfiddle.net/GYsW6/1/

Answer 10

如果有人在這個問題用SASS/SCSS和絆 - 也許這混入可能會有所幫助：

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) { 
    overflow: hidden; 
    text-overflow: -o-ellipsis-lastline; 
    text-overflow: ellipsis; 
    display: block; 
    /* autoprefixer: off */ 
    display: -webkit-box; 
    -webkit-line-clamp: $numLines; 
    -webkit-box-orient: vertical; 
    max-height: $numLines * $lineHeight + unquote('em'); 
} 

這隻在webkit瀏覽器中添加省略號。休息就是把它切斷。

Answer 11

我發現Skeep的回答是不夠的，需要一個overflow風格太：

overflow: hidden; 
text-overflow: ellipsis; 
-webkit-line-clamp: 2; 
display: -webkit-box; 
-webkit-box-orient: vertical; 

Answer 12

上-webkit-線夾持器的純CSS方法的基礎上，其WebKit的工作原理：

@-webkit-keyframes ellipsis {/*for test*/ 
 
    0% { width: 622px } 
 
    50% { width: 311px } 
 
    100% { width: 622px } 
 
} 
 
.ellipsis { 
 
    max-height: 40px;/* h*n */ 
 
    overflow: hidden; 
 
    background: #eee; 
 

 
    -webkit-animation: ellipsis ease 5s infinite;/*for test*/ 
 
    /** 
 
    overflow: visible; 
 
    /**/ 
 
} 
 
.ellipsis .content { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-pack: center; 
 
    font-size: 50px;/* w */ 
 
    line-height: 20px;/* line-height h */ 
 
    color: transparent; 
 
    -webkit-line-clamp: 2;/* max row number n */ 
 
    vertical-align: top; 
 
} 
 
.ellipsis .text { 
 
    display: inline; 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
    color: #000; 
 
} 
 
.ellipsis .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 

 
    /** 
 
    overflow: visible; 
 
    left: 0; 
 
    background: rgba(0,0,0,.5); 
 
    /**/ 
 
} 
 
.ellipsis .overlay:before { 
 
    content: ""; 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 

 
    /** 
 
    background: lightgreen; 
 
    /**/ 
 
} 
 
.ellipsis .placeholder { 
 
    float: left; 
 
    width: 50%; 
 
    height: 40px;/* h*n */ 
 

 
    /** 
 
    background: lightblue; 
 
    /**/ 
 
} 
 
.ellipsis .more { 
 
    position: relative; 
 
    top: -20px;/* -h */ 
 
    left: -50px;/* -w */ 
 
    float: left; 
 
    color: #000; 
 
    width: 50px;/* width of the .more w */ 
 
    height: 20px;/* h */ 
 
    font-size: 14px; 
 

 
    /** 
 
    top: 0; 
 
    left: 0; 
 
    background: orange; 
 
    /**/ 
 
}

<div class='ellipsis'> 
 
    <div class='content'> 
 
     <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div> 
 
     <div class='overlay'> 
 
      <div class='placeholder'></div> 
 
      <div class='more'>...more</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 13

這裏是很好的example在純CSS。

.container{ 
 
    width: 200px; 
 
} 
 
.block-with-text { 
 
    overflow: hidden; 
 
    position: relative; 
 
    line-height: 1.2em; 
 
    max-height: 3.6em; 
 
    text-align: justify; 
 
    margin-right: -1em; 
 
    padding-right: 1em; 
 
} 
 
.block-with-text+.block-with-text{ 
 
    margin-top:10px; 
 
} 
 
.block-with-text:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.block-with-text:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 1em; 
 
    height: 1em; 
 
    margin-top: 0.2em; 
 
    background: white; 
 
}

<div class="container"> 
 

 

 
<div class="block-with-text"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a 
 
</div> 
 

 
<div class="block-with-text"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry 
 
</div> 
 

 

 
<div class="block-with-text"> 
 
Lorem Ipsum is simply 
 
</div> 
 

 
</div>

Answer 14

如果有人試圖讓行鉗在Flexbox的工作，這是一個稍微麻煩 - 尤其是當你有很長的話折磨測試。此代碼段中唯一真正的差異是在包含截斷文本的Flex項目中的min-width: 0;，以及word-wrap: break-word;。爲了洞察，請致電https://css-tricks.com/flexbox-truncated-text/。免責聲明：據我所知，這仍然是webkit。

.flex-parent { 
 
    display: flex; 
 
} 
 

 
.short-and-fixed { 
 
    width: 30px; 
 
    height: 30px; 
 
    background: lightgreen; 
 
} 
 

 
.long-and-truncated { 
 
    margin: 0 20px; 
 
    flex: 1; 
 
    min-width: 0;/* Important for long words! */ 
 
} 
 

 
.long-and-truncated span { 
 
    display: inline; 
 
    -webkit-line-clamp: 3; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    display: -webkit-box; 
 
    -webkit-box-orient: vertical; 
 
    word-wrap: break-word;/* Important for long words! */ 
 
}

<div class="flex-parent"> 
 
    <div class="flex-child short-and-fixed"> 
 
    </div> 
 
    <div class="flex-child long-and-truncated"> 
 
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span> 
 
    </div> 
 
    <div class="flex-child short-and-fixed"> 
 
    </div> 
 
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx（codepen版本）