Issue
I have my .mainText with a dynamic text and my .secText with another text. This divs or spans in a .content that is a row in a table. My content width is fix.
I would like to see my .secText all time after the .mainText content no matter if my .mainText content is too long or not.
I think it can be achieve with .display: flex but I didn't find the way for it...
So my current is: |Test loooooo...|
and my expected is: |Test looo...(5)|
.content {
width: 120px;
border: 1px solid black;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.mainText {
color: blue;
}
.secText {
color: red;
}<div class="content">
<span class="mainText">Test looooooooooooong </span>
<span class="secText">(5)</span>
</div>Solution
Yes, make the container a flexbox, then apply your overflow styling on the main text element.
.content {
width: 120px;
border: 1px solid black;
display: flex;
}
.mainText {
color: blue;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.secText {
color: red;
}<body>
<div class="content">
<span class="mainText">Test long long long long long long</span>
<span class="secText">(5)</span>
</div>
</body>Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.