text-overflow: ellipsis on middle span

Question

I have a bar like this:

<div class="traffic-info-bar" ng-if="hasTrafficInfo" ng-click="openTrafficInfoModal()">
    <span class="icon ion-alert-circled"></span>
    <span class="traffic-info-main-text">This is a very long placeholder text</span>
    <span class="traffic-info-read-more">Read more</span>
</div>

With CSS:

.traffic-info-bar {
  text-transform: uppercase;
  font-weight: bold;
  color:#fff;
  text-align:center;
  background-color: #007aff;
  height: 40px;
  padding-top: 12px;
}

.traffic-info-main-text {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-info-read-more {
  font-size: 10px;
  text-decoration: underline;
}

This is the result on a small screen (iPhone 5):

As you see, you can almost see the "READ MORE" text at the bottom of the blue bar. This is an exampla what I want it to look like.

Can anyone see how I can solve this?

Possible duplicate of http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working?rq=1. Your element is a `span` which is an inline element and you don't have a `width`. — Harry, Jun 16 '16 at 14:15

score 3 · Answer 1 · answered Jun 16 '16 at 14:17

Flexbox can do that.

.traffic-info-bar {
  text-transform: uppercase;
  font-weight: bold;
  color:#fff;
  text-align:center;
  background-color: #007aff;
  height: 40px;
  padding-top: 12px;
  display: flex;
  justify-content: center;
  align-items: baseline;
}


.traffic-info-main-text {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-info-read-more {
  font-size: 10px;
  text-decoration: underline;
    white-space: nowrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="traffic-info-bar" ng-if="hasTrafficInfo" ng-click="openTrafficInfoModal()">
  <span class="icon ion-alert-circled"></span>
  <span class="traffic-info-main-text">This is a very long placeholder text</span>
  <span class="traffic-info-read-more">Read more</span>
</div>

Codepen Demo

Ricky Ruiz · Accepted Answer · 2017-10-23T23:10:48.987

I understand the hype of "flexbox can do that" but you can do that without using flexbox at all. It's simpler, just a matter of inline block and block elements. Since you are using a span, by default it's an inline-block, you need to wrap it in a container that is a block and has a defined width.

Before even trying flexbox it is important to understand the difference between these two.

Here's in jsfiddle.

Here's the code snippet:

.traffic-info-bar {
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #007aff;
  height: 40px;
  padding-top: 12px;
}

.traffic-info-main-text__container {
  float: left;
  width: 80%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid pink;
  box-sizing: border-box;
  padding: 0 10px;
}

.traffic-info-main-text {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-info-read-more__container {
  float: left;
  width: 20%;
  border: 1px solid yellow;
  box-sizing: border-box;
}

.traffic-info-read-more {
  font-size: 10px;
  text-decoration: underline;
}

<div class="traffic-info-bar" ng-if="hasTrafficInfo" ng-click="openTrafficInfoModal()">
  <div class="traffic-info-main-text__container">
    <span class="icon ion-alert-circled"></span>
    <span class="traffic-info-main-text">This is a very long placeholder text</span>
  </div>
  <div class="traffic-info-read-more__container">
    <span class="traffic-info-read-more ellipses">Read more</span>
  </div>
</div>

text-overflow: ellipsis on middle span

2 Answers2