我有一个这样的酒吧:
<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)上的结果:
如你所见,你几乎可以看到&#34; READ MORE&#34;蓝色条底部的文字。这是我希望它看起来的例子。
有谁能看到我如何解决这个问题?
答案 0 :(得分:3)
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>
答案 1 :(得分:2)
我理解“flexbox的炒作可以做到这一点”但你可以在不使用flexbox的情况下做到这一点。它更简单,只是内联块和块元素的问题。由于您使用的是span,因此默认情况下它是一个内联块,您需要将其包装在一个块中并具有已定义宽度的容器中。
在尝试使用flexbox之前,了解这两者之间的区别非常重要。
这是jsfiddle。
以下是代码段:
.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>