文本溢出省略号点应该是文本的中心

Question

我希望省略号点应该是文本的中心.当我使用它时text-overflow: ellipsis,它会显示最后的点,而我希望它们居中.

p.test1 {
    white-space: nowrap; 
    width: 100px; 
    border: 1px solid green;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:10px;
}

<p class="test1">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</p>

上面的例子显示了这样的结果

1 2 3 4 5 6 7 8 9...

预期的结果是:

1 2 3 4 5 6 ... 13 14 15 16 17 18

Answer 1

一个简单的解决方案是在 p 标签内添加一个 span 并使其在文本溢出时显示省略号，并在 span 标签后添加最后一个单词。

p.test1 {
  white-space: nowrap;
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

.elips {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  width: 100%;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p class="test1"><span class="elips">1 2 3 4 5 6 7 8 9 10 11 12</span> 13 14 15 16 17 18 Add Last word here</p>

Answer 2

这对于纯 css 是不可能的，但是如果您无法使用 js 或服务器端语言来实现您想要的，您可以使用以下内容 - 这有点小技巧，但效果很好。唯一的缺点是您将复制您的号码：

p.test1 {
  width: 200px;
  border: 1px solid green;
  padding: 10px;
  white-space:nowrap;
}

p > span {
  white-space: nowrap;
  overflow: hidden;
  vertical-align:middle;
}

.ellipsis {
  display: inline-block;
  width: calc(50% + 1.2em);
  text-overflow: ellipsis;
}

.indent {
  display:inline-flex;
  width: calc(50% - 1.2em);
  justify-content:flex-end;
}

<p class="test1">
  <span class="ellipsis">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span><!--
  --><span class="indent">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span>
</p>

这是一个可以玩的小提琴- 改变 p 宽度，你会看到它是如何工作的，不是完美的，但你会得到最好的纯 css，而无需手动计算拆分的位置

Answer 3

使用纯 CSS 无法完成此操作，因此我在 jQuery 的帮助下找到了解决方案。

<div id="wrapper">
    <div class="example">
        <h1>How to display Text-Overflow:ellipsis dots in center of the text</h1>
        <p><strong>Truncate text using jQuery</strong></p>
        <div class="r">
            <div class="box after pathname" id="dot5">
                <div class="pathname">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae pretium mauris. Ut tincidunt arcu diam, in congue elit efficitur id. Nunc maximus diam et tellus tincidunt, vitae placerat lacus ullamcorper.</div>
            </div>
        </div>
    </div>
</div>

CSS：

div.r {
    width: 275px;
    background-color:red;
}

div.box {
    border: 1px solid #ccc;
    height: 40px;
    padding: 15px 20px 10px 20px;
}

.pathname {
    height: 25px;
    color:#fff;
    font-size:18px;
}

JavaScript：

$(function() {
    $('#dot5 .pathname').each(function() {
        var path = $(this).html().split(' ');
        if (path.length === 0) {
            return;
        }

        var name = path.pop();
        $(this).html(path.join( ' ' ) + '<span class="filename">' + name + '</span>');
        $(this).dotdotdot({
            after: '.filename',
            wrap: 'letter'
        });
    });
});

演示在这里