Text-Überlauf: Auslassungszeichen auf mittlere Spanne

Question

Ich habe eine Bar wie folgt aus:

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

Mit 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; 
} 

Dies ist das Ergebnis auf einem kleinen Bildschirm ist (iPhone 5):

Wie Sie sehen, können Sie fast den Text "LESEN SIE MEHR" am unteren Rand der blauen Leiste sehen. Dies ist ein Beispiel dafür, wie es aussehen soll.

Kann jemand sehen, wie ich dieses Problem lösen kann?

Answer 1

verstehe ich den Hype von "Flexbox das tun kann", aber Sie können auch ohne Flexbox überhaupt tun. Es ist einfacher, nur eine Frage von Inline-Block- und Blockelementen. Da Sie einen Bereich verwenden, ist es standardmäßig ein Inline-Block. Sie müssen ihn in einen Container umbrechen, der ein Block ist und eine definierte Breite hat.

Bevor Sie Flexbox ausprobieren, ist es wichtig, den Unterschied zwischen diesen beiden zu verstehen.

---

Hier ist in jsfiddle.

---

Hier ist der Code-Schnipsel:

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

Answer 2

Flexbox kann das tun.

.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