Question

我试图创建一些论坛主题的列表视图，里面有帖子数量。目前我有一个静态示例here。

这是我触发省略号的方式：

ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap; 
}

ul li {
    line-height: 3em;
    padding-left: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
}

HTML结构：

<ul>
    <li>
        <span>21:26</span>
        <a>Klaagcorner</a>
        <span>
            <a>29703</a>
        </span>
    </li>
    <li>
       ...
    </li>
</ul>

如您所见，25.9K跳转到下一行，因为标题太长了。有没有办法选择省略号必须从哪里开始？将width: ##px放在a - 标记上不做任何事情。将省略号放在另一个元素上时，它可能有效吗？

我尝试添加样式以触发元素上的省略号（而不是ul上的ul li，而不是ul li上的ul li a，但是这似乎没有做到这一点。欢迎使用纯CSS和JS / jQuery解决方案！

现在的样子：

我想要的是什么：

Answer 1

您将省略号放在整个<li>而不只是<a>

上

将省略号代码移动到如下所示：

ul li {
    line-height: 3em;
    padding-left: 20px;
}

ul li > a{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    width: 200px;
    position: absolute;
    margin-left: 5px;
}

这是updated fiddle

Answer 2

如果您可以使用flexbox，那就非常简单。

首先，从ul和容器li中取出溢出的内容。我们不需要那个;它适用于分别溢出整个ul和li的内容。

我们将.posttitel元素设为容器，它已经是：

.posttitel {
    border-top: 2px solid #bbb;
    display: flex;  /* make it a flex container */
    flex-flow: row nowrap;  /* ask it not to wrap, and to orient along a row */
    justify-content: space-between;  /* space out the items along the row, allocating extra space between each item */
}

然后我们告诉它为实际的帖子标题提供任何额外的空间，这真的需要它自己的类：

.posttitel > a:nth-child(2) {  /* this should get a class, like .titel */
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

我们会为.date添加一些保证金：

.date {
    margin-right: 0.5em;
}

我们已经完成了！

我为它制作了一个JSBin（http://jsbin.com/wacotu/edit?css,output），并在下面嵌入了一个片段。

＆＃13;

var comments = Array.prototype.slice.call(document.querySelectorAll('.comments a'))
var commentsCount = comments.length

function kFormatter(num) {
    return num > 999 ? (num / 1000).toFixed(1) + 'k' : num
}

comments.forEach(function (comment) {
    comment.textContent = kFormatter(comment.textContent)
})

＆＃13;

#laatste-nieuws {
  width: 300px;
  background: #fff;
}

ul {
	list-style: none;
	padding: 0;
}

ul li {
	line-height: 3em;
	padding-left: 20px;
}


.posttitel {
	border-top: 2px solid #bbb;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.date {
  margin-right: 0.5em;
}

.posttitel > a:nth-child(2) {
  flex: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.comments {
	font-weight: bold;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="laatste-nieuws" class="list">
  <div class="tabtitel">
    <h4><i class="fa fa-comments"></i> Laatste forumreacties</h4>
  </div>
  <div id="home-laatstenieuws-content">
    <ul>
      <li class="itemrow posttitel">
        <span class="date">21:26</span>
        <a href="/forum.php?page=topic&topic_id=5050&forum_id=15&start=1486" title="Klaagcorner">Klaagcorner</a>
        <span class="comments">
          <a href="/forum.php?page=topic&topic_id=5050&forum_id=15" title="Reacties op Klaagcorner">29703</a>
        </span>
      </li>

      <li class="itemrow posttitel"><span class="date">21:20</span> <a href="/forum.php?page=topic&topic_id=12769&forum_id=17&start=17" title="Black Ops 3 [Algemeen Topic]">Black Ops 3 [Algemeen Topic]</a><span class="comments"><a href="/forum.php?page=topic&topic_id=12769&forum_id=17" title="Reacties op Black Ops 3 [Algemeen Topic]">329</a></span></li>

      <li class="itemrow posttitel"><span class="date">21:07</span> <a href="/forum.php?page=topic&topic_id=11652&forum_id=17&start=191" title="Destiny">Destiny</a><span class="comments"><a href="/forum.php?page=topic&topic_id=11652&forum_id=17" title="Reacties op Destiny">3805</a></span></li>

      <li class="itemrow posttitel"><span class="date">21:07</span> <a href="/forum.php?page=topic&topic_id=11652&forum_id=17&start=191" title="Destiny">Destiny</a><span class="comments"><a href="/forum.php?page=topic&topic_id=11652&forum_id=17" title="Reacties op Destiny">3805</a></span></li>

      <li class="itemrow posttitel"><span class="date">21:02</span> <a href="/forum.php?page=topic&topic_id=1399&forum_id=20&start=239" title="Wehkamp">Wehkamp</a><span class="comments"><a href="/forum.php?page=topic&topic_id=1399&forum_id=20" title="Reacties op Wehkamp">4767</a></span></li>

      <li class="itemrow posttitel"><span class="date">20:42</span> <a href="/forum.php?page=topic&topic_id=681&forum_id=15&start=1297" title="Het waar doet het je aan denken spel! (5 posts wachten!)">Het waar doet het je aan denken spel! (5 posts wachten!)</a><span class="comments"><a href="/forum.php?page=topic&topic_id=681&forum_id=15" title="Reacties op Het waar doet het je aan denken spel! (5 posts wachten!)">25939</a></span></li>

      <li class="itemrow posttitel"><span class="date">20:27</span> <a href="/forum.php?page=topic&topic_id=14454&forum_id=17&start=3" title="Guitar Hero Live vs Rockband 4">Guitar Hero Live vs Rockband 4</a><span class="comments"><a href="/forum.php?page=topic&topic_id=14454&forum_id=17" title="Reacties op Guitar Hero Live vs Rockband 4">54</a></span></li>

      <li class="itemrow posttitel"><span class="date">20:16</span> <a href="/forum.php?page=topic&topic_id=6959&forum_id=15&start=752" title="Juichcorner">Juichcorner</a><span class="comments"><a href="/forum.php?page=topic&topic_id=6959&forum_id=15" title="Reacties op Juichcorner">15036</a></span></li>

      <li class="itemrow posttitel"><span class="date">20:14</span> <a href="/forum.php?page=topic&topic_id=11640&forum_id=17&start=25" title="Tales of [Algemeen Topic]">Tales of [Algemeen Topic]</a><span class="comments"><a href="/forum.php?page=topic&topic_id=11640&forum_id=17" title="Reacties op Tales of [Algemeen Topic]">491</a></span></li>

      <li class="itemrow posttitel"><span class="date">19:57</span> <a href="/forum.php?page=topic&topic_id=1538&forum_id=17&start=169" title="Laatste hardware-aankoop">Laatste hardware-aankoop</a><span class="comments"><a href="/forum.php?page=topic&topic_id=1538&forum_id=17" title="Reacties op Laatste hardware-aankoop">3368</a></span></li>

      <li class="itemrow"> <a href="/index.php?page=laatsteforumreacties">Bekijk de laatste 100 forumreacties</a></li>
    </ul>
  </div>
</div>
<!-- end #laatste-reacties -->
</body>
</html>

＆＃13;

如何选择溢出省略号的起始位置

2 个答案: