Cant make text-overflow as ellipsis

Question

I am trying to make two texts to partly hide itself when space to the right is not available. For example if the space to the right is not available then A Loooong text should become like A Loooon...

But the problem is that the text just gets hidden within the parent div when I resize the browser without the desired behaviour.
The following is what I have ben trying.

html,
body {
  background-image: url("../images/theme1.png");
  background-repeat: repeat;
}

.topNav {
  background-color: rgba(255, 255, 255, 1);
  border: none;
  min-height: 60px;
}

.userNavL,
.userNavR {
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
}

.userNavL {
  width: 70vw;
  overflow: hidden;
  white-space: nowrap;
}

.userNavR {
  width: 30vw;
}

.leftside {
  display: inline-block;
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

.rightside {
  display: inline-block;
  vertical-align: middle;
}

.username {
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lastSeen {
  display: block;
  font-size: 13px;
  padding-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profilePic {
  width: 40px;
  height: 40px;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar topNav">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand userNavL" style="background-color: #0f0f0f;">
        <div class="leftside">
          <span class="ionicons ion-android-arrow-back icon"></span>
        </div>
        <div class="rightside" style="background-color: #5cb85c;">
          <span class="username">A big long name with a big surname</span>
          <span class="lastSeen">Last seen yesterday at 10:45 PM</span>
        </div>
      </a>
      <!--
                <a class="navbar-brand userNavR" style="background-color: #3c3c3c;">
                    <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic">
                </a>-->
    </div>
  </div>
</nav>

ashish singh · Answer 1 · 2017-09-02T14:28:10.973

text-overflow will need a width on the container element.. so give your container a width.

and you should do it in small widths using media queries

/* my addition */

.username,
.lastSeen {
  display: inline-block;
  width: 140px;
}
  
/* my addition ends here */


html,
body {
  background-image: url("../images/theme1.png");
  background-repeat: repeat;
}


.topNav {
  background-color: rgba(255, 255, 255, 1);
  border: none;
  min-height: 60px;
}

.userNavL,
.userNavR {
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
}

.userNavL {
  width: 70vw;
  overflow: hidden;
  white-space: nowrap;
}

.userNavR {
  width: 30vw;
}

.leftside {
  display: inline-block;
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

.rightside {
  /* make display block for full width */
   /* display: inline-block; */
  vertical-align: middle;
}

.username {
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lastSeen {
  display: block;
  font-size: 13px;
  padding-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profilePic {
  width: 40px;
  height: 40px;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar topNav">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand userNavL" style="background-color: #0f0f0f;">
        <div class="leftside">
          <span class="ionicons ion-android-arrow-back icon"></span>
        </div>
        <div class="rightside" style="background-color: #5cb85c;">
          <span class="username">A big long name with a big surname</span>
          <span class="lastSeen">Last seen yesterday at 10:45 PM</span>
        </div>
      </a>
      <!--
                <a class="navbar-brand userNavR" style="background-color: #3c3c3c;">
                    <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic">
                </a>-->
    </div>
  </div>
</nav>

Ok, but I wanted to make the class `rightside` to take up remaining space of the parent `userNavL`. Isn't it possible? In a easy way to make you understand, I want the name and last seen to take up space as much as that of the black area. When the black portion gets shorter than the text, the text goes into ellipsis. Using CSS only is preffered. :( — Ayan, Sep 02 '17 at 14:23
On this edit, you can see that, the green area just went below the left arrow :( I was able to achieve this before I posted the question but this is not what am looking for unfortunately. All three should be on the same line and within the black div :( And when the black div size reduces, the text should go into ellipsis. — Ayan, Sep 02 '17 at 14:31

score 0 · Answer 2 · answered Sep 02 '17 at 14:26

Am not so sure if HTML and CSS will really do what you require at the rate of satisfaction you may require. You could limit the width of your div but that also means your design may not be so responsive on certain screen sizes.

What you could do is use Javascript to solve it like from this link topic >> How do I only display part of a string using css

or this other article found here that keeps CSS>> https://quirksmode.org/css/user-interface/textoverflow.html

I am looking for some pure CSS way. – Ayan Sep 02 '17 at 14:31 — Ayan, Sep 02 '17 at 14:31

score 0 · Accepted Answer · answered Sep 02 '17 at 14:42

You trying to add text-overflow:ellipsis for that green background div, if so then it is displayed as inline-block, so the width of that div will be same as text present inside that div thus there won't be any overflow and you can't get styled as text-overflow:ellipsis. So add manual width to get that output.

.rightside {
  width: 80%;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html,
body {
  background-image: url("../images/theme1.png");
  background-repeat: repeat;
}

.topNav {
  background-color: rgba(255, 255, 255, 1);
  border: none;
  min-height: 60px;
}

.userNavL,
.userNavR {
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: default;
}

.userNavL {
  width: 70vw;
  overflow: hidden;
}

.userNavR {
  width: 30vw;
}

.leftside {
  display: inline-block;
  font-size: 30px;
  vertical-align: middle;
  margin-right: 5px;
}

.rightside {
  width: 60%;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.username {
  font-size: 20px;
}

.lastSeen {
  display: block;
  font-size: 13px;
  padding-top: 2px;
  overflow: hidden;
}

.profilePic {
  width: 40px;
  height: 40px;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar topNav">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand userNavL" style="background-color: #0f0f0f;">
        <div class="leftside">
          <span class="ionicons ion-android-arrow-back icon"></span>
        </div>
        <div class="rightside" style="background-color: #5cb85c;">
          <span class="username">A big long name with a big surname</span>
          <span class="lastSeen">Last seen yesterday at 10:45 PM</span>
        </div>
      </a>
      <!--
                <a class="navbar-brand userNavR" style="background-color: #3c3c3c;">
                    <img src="images/no_dp.png" class="img-responsive img-circle pull-right profilePic">
                </a>-->
    </div>
  </div>
</nav>

Ok, nice improvement :) But still the last seen doesn't turn into ellipsis and you can still see some remaining black portion to the right. Anything about that? — Ayan, Sep 02 '17 at 14:50
@Ayan font-size differs for both username and lastseen, you could assign width to lastseen and get same output hopefully. — frnt, Sep 02 '17 at 14:53

Cant make text-overflow as ellipsis

3 Answers3