Rvervuurt
Rvervuurt

Reputation: 8963

How to select where my overflow ellipsis starts

I'm trying to create a list-view of some forumtopics, with the number of posts inside. At the moment I have a static example here.

This is how I trigger the ellipsis:

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;
}

And the HTML structure:

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

As you can see, the 25.9K jumps to the next line, because the title is so long. Is there a way to select where the ellipsis has to start? Putting width: ##px doesn't do anything on the a-tag. Maybe it works when putting the ellipsis on another element?

I tried to add the styling to trigger the ellipsis on an element down (so instead of ul on ul li, and instead of ul li on ul li a), but this didn't seem to do the trick. Both pure CSS and JS/jQuery-solutions are welcome!

How it looks now:

enter image description here

What I want:

enter image description here

Upvotes: 1

Views: 210

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

You're putting the ellipsis on the entire <li> instead of just the <a>

Move the ellipsis code to look like this:

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;
}

Here is an updated fiddle

Upvotes: 3

Hawken MacKay Rives
Hawken MacKay Rives

Reputation: 1209

If you can use flexbox, it's pretty simple.

First, take the overflow stuff off of the ul and the container li. We don't need that; it applies to stuff that overflows the entire ul and the li, respectively.

We make the .posttitel element the container, which it already is:

.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 */
}

Then we tell it to give any extra space to the actual post title, which really needs it's own class:

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

We'll add a bit of margin to the .date:

.date {
    margin-right: 0.5em;
}

And we're done!

I've made a JSBin for it (http://jsbin.com/wacotu/edit?css,output) and embedded a snippet below.

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)
})
#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;
}
<!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>

Upvotes: 2

Related Questions