Question

尝试设置css执行以下操作：

想象一下，我们有两个相同的并行div，其中包含文本：

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

div比“Example”宽，但比“This.is.a.example.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

左边和左边溢出的div对齐显示文本的结尾

2 个答案: