Android/Webkit Text-Overflow: Ellipsis Not Working

text-overflow: ellipsis not working

You need to have CSS overflow, width (or max-width), display, and white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

<span>Test test test test test test</span>

Text-overflow: ellipsis jumps behind text on Android

So i managed to figure it out, by running through the css line by line. It turns out that text-rendering: optimizeLegibility;
causes the bug!
Removed it and now it works perfectly!

CSS text-overflow: ellipsis; not working?

text-overflow:ellipsis; only works when the following are true:

• The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

• Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
• Set one of its container elements to display:block and give that element a fixed width or max-width.
• Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {

  height: 18px;

  width: 140px;

  padding: 0;

  overflow: hidden;

  position: relative;

  display: inline-block;

  margin: 0 5px 0 5px;

  text-align: center;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #000;

}

<div class="app">

  <a href="">Test Test Test Test Test Test</a>

</div>

Cant make text-overflow as ellipsis

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>

text-overflow ellipsis does not work with dynamic width

Had display: table; in first div which was causing troubles with the ellipsis. If you delete this then the ellipsis works fine.

I wont delete the question it may help someone

Check it working here: http://jsfiddle.net/vNRpw/6/

---

Related Topics