Trim text inside flexbox

huangapple go评论76阅读模式
英文:

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

&lt;div class=&quot;container&quot;&gt;
  &lt;span class=&quot;label&quot;&gt;short&lt;/span&gt;
  &lt;span class=&quot;label-asterisk&quot;&gt;*&lt;/span&gt;
&lt;/div&gt;

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

&lt;h1&gt;short text&lt;/h1&gt;
&lt;div class=&quot;container&quot;&gt;
  &lt;span class=&quot;label&quot;&gt;short&lt;/span&gt;
  &lt;span class=&quot;label-asterisk&quot;&gt;*&lt;/span&gt;
&lt;/div&gt;

&lt;h1&gt;long text&lt;/h1&gt;
&lt;div class=&quot;container&quot;&gt;
  &lt;span class=&quot;label&quot;&gt;
    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.
  &lt;/span&gt;
  &lt;span class=&quot;label-asterisk&quot;&gt;*&lt;/span&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月19日 17:00:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76052613.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定