css - div，其左对齐和左对齐溢出，显示文本的结尾

正在尝试设置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"

我该怎么做？

最佳答案

我只是对你的问题很好奇，在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);
}

我想你还是需要修改这个以满足你的要求。