文本溢出：中间跨度上的省略号答案

【问题标题】：text-overflow: ellipsis on middle span文本溢出：中间跨度上的省略号
【发布时间】：2016-06-16 14:09:09
【问题描述】：

我有一个这样的酒吧：

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

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

这是小屏幕上的结果（iPhone 5）：

如您所见，您几乎可以在蓝色条的底部看到“阅读更多”文字。这是我想要的示例。

谁能看到我如何解决这个问题？

【问题讨论】：

stackoverflow.com/questions/17779293/… 的可能重复项。您的元素是 span，它是一个内联元素，而您没有 width。

标签： html css overflow word-wrap

【解决方案1】：

Flexbox 可以做到这一点。

.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

【讨论】：

【解决方案2】：

我理解 “flexbox 可以做到这一点”的炒作，但你完全可以不使用 flexbox 来做到这一点。它更简单，只是内联块和块元素的问题。由于您使用的是跨度，默认情况下它是一个内联块，您需要将其包装在一个容器中，该容器是一个块并具有定义的宽度。

在尝试使用 flexbox 之前，了解这两者之间的区别很重要。

这里是jsfiddle。

这里是sn-p的代码：

.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>

【讨论】：