英文:
Trim text inside flexbox
问题
I have a row has two text blocks inside, and flexbox is used to make it responsive.
The goal I am trying to achieve is the text length will not exceed 98% of the parent container, and the two text blocks should sit next to each other.
For example:
- long text will be:
[longgggggg...*]
- short text will be:
[short*]
To trim text, I set the flex basis of the main text to 98%. But after I did that, the asterisk mark is moved to the right edge.
Is there a way I can make the asterisk mark sit next to the main text?
英文:
I have a row has two text blocks inside, and flexbox is used to make it responsive.
The goal I am trying to achieve is the text length will not exceed 98% of parent container, and the two text blocks should sit next to each other.
For example:
- long text will be :
[longgggggg...*]
- short text will be:
[short* ]
To trim text, I set flex basis of main text to 98%. But after I did that, the asterisk mark is moved to right edge.
Is there a way I can make the asterisk mark sit next to the main text?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
background: #e3e3e3;
}
.label {
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 0;
flex: 1 1 98%;
}
.label-asterisk {
color: #a72e12;
}
<!-- language: lang-html -->
<div class="container">
<span class="label">short</span>
<span class="label-asterisk">*</span>
</div>
<!-- end snippet -->
答案1
得分: 1
By adding max-width: fit-content
to .label
, the asterisk is placed next to the short text as expected.
将 max-width: fit-content
添加到 .label
,星号会按预期放在短文本旁边。
英文:
By adding max-width: fit-content
to .label
the asterisk is placed next to the short text as expected.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
background: #e3e3e3;
}
.label {
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 0;
flex: 1 1 98%;
max-width: fit-content;
}
.label-asterisk {
color: #a72e12;
}
<!-- language: lang-html -->
<h1>short text</h1>
<div class="container">
<span class="label">short</span>
<span class="label-asterisk">*</span>
</div>
<h1>long text</h1>
<div class="container">
<span class="label">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<span class="label-asterisk">*</span>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论