DIV與左側溢出和左對齊顯示試圖建立CSS做文字

Question

的末尾以下內容：

試想一下，我們在它與文字相等的兩分平行的div：

<div class="xy">Example</div> 
<div class="xy">This.is.a.example.of.a.long.Text</div> 

div比「Example」寬，但比「This.is.a.ex.of.a.long.Text」寬。 現在我希望看到這些文本左對齊，以便奇數空間位於乘坐側的「示例」後面。

但我也想用

text-overflow:ellipsis 

用的方式，我會看到的文字的結束的較長的文本。 所以它應該看起來像：

"Example    " 
"...ample.of.a.long.Text" 

我該怎麼做？

Answer 1

我只是好奇，你的問題，並給它在Java腳本試試如下，

Demo

var maxChar = 20, 
    dots = '. . . ', 
    toTrim = $('.toTrim'), 
    toTrimLength = toTrim.text().length, 
    getChar = toTrimLength - maxChar; 

if(toTrimLength > maxChar){ 
    var newString = dots + toTrim.text().slice(getChar)  
    toTrim.text(newString); 
} 

我猜你仍然需要修改這個適合您的需求。

Answer 2

同時在標題attr中添加相同的字符串以便在懸停時查看全文，並且如果您希望更好地完成此操作。更改文本溢出於：懸停

本文將幫助你http://html5hub.com/ellipse-my-text/#i.6k1nyg11zqdiar