Html 文本溢出：中间跨距上的省略号

我有一个这样的酒吧：

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

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

如您所见，您几乎可以在蓝色栏底部看到“阅读更多”文本。这是我想要的一个例子

有人知道我如何解决这个问题吗？

Flexbox可以做到这一点

。交通信息栏{
文本转换：大写；
字体大小：粗体；
颜色：#fff；
文本对齐：居中；
背景色：#007aff；
高度：40px；
填充顶部：12px；
显示器：flex；
证明内容：中心；
调整项目：基线；
}
.交通信息主文本{
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.交通信息阅读更多{
字体大小：10px；
文字装饰：下划线；
空白：nowrap；
}

这是一个很长的占位符文本
阅读更多

Flexbox可以做到这一点

。交通信息栏{
文本转换：大写；
字体大小：粗体；
颜色：#fff；
文本对齐：居中；
背景色：#007aff；
高度：40px；
填充顶部：12px；
显示器：flex；
证明内容：中心；
调整项目：基线；
}
.交通信息主文本{
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.交通信息阅读更多{
字体大小：10px；
文字装饰：下划线；
空白：nowrap；
}

这是一个很长的占位符文本
阅读更多

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

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

---

这是我的

---

下面是代码片段：

。交通信息栏{
文本转换：大写；
字体大小：粗体；
颜色：#fff；
文本对齐：居中；
背景色：#007aff；
高度：40px；
填充顶部：12px；
}
.traffic-info-main-text\u容器{
浮动：左；
宽度：80%；
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
边框：1px纯红；
框大小：边框框；
填充：0 10px；
}
.交通信息主文本{
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.traffic-info-read-more\u容器{
浮动：左；
宽度：20%；
边框：1px纯黄色；
框大小：边框框；
}
.交通信息阅读更多{
字体大小：10px；
文字装饰：下划线；
}

这是一个很长的占位符文本
阅读更多

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

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

---

这是我的

---

下面是代码片段：

。交通信息栏{
文本转换：大写；
字体大小：粗体；
颜色：#fff；
文本对齐：居中；
背景色：#007aff；
高度：40px；
填充顶部：12px；
}
.traffic-info-main-text\u容器{
浮动：左；
宽度：80%；
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
边框：1px纯红；
框大小：边框框；
填充：0 10px；
}
.交通信息主文本{
溢出x：隐藏；
文本溢出：省略号；
空白：nowrap；
}
.traffic-info-read-more\u容器{
浮动：左；
宽度：20%；
边框：1px纯黄色；
框大小：边框框；
}
.交通信息阅读更多{
字体大小：10px；
文字装饰：下划线；
}

这是一个很长的占位符文本
阅读更多

可能存在的重复项。您的元素是一个

span

，它是一个内联元素，您没有

宽度

。的可能重复项。您的元素是一个

span

，它是一个内联元素，您没有

宽度。
.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;
}