2

I need to render a long text within a one line. and an image in the end of the line (tight end of the screen).

Given a very long text, I have to simply truncate it. The text should now go into a second line because it is too long.

please see my code. how can avoid pushing the nice emoji out of the screen?

Please take into account that the elements on the right side might be dynamic. so giving a fixed width is not good enough.

div {
display:flex;
justify-content: space-between;
}

span {
white-space:nowrap;
overflow:hidden;
}
<div>
<span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
<span></span>
</div>

4

2 回答 2

2

由于两个<span>元素都是overflow:hidden，因此第二个元素也会<span>被截断。

一种解决方案是仅将文本元素设置为截断。
下面，我已经证明这也适用于多个图标。

body {
  margin: 0;
}

div {
  display: flex;
  justify-content: space-between;
}

.text {
  white-space: nowrap;
  overflow: hidden;
}
<div>
  <span class="text">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
  <span></span>
  <span></span>
  <span></span>
</div>

flex-shrink另一种解决方案是通过设置为零来防止图标缩小。
下面，我使用flex速记来设置flex-grow,flex-shrink和flex-basis.
（也适用于不同宽度的图标和多个图标。） 

body {
  margin: 0;
}

div {
  display: flex;
  justify-content: space-between;
}

span {
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
}
<div>
  <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
  <span class="icon"></span>
  <span class="icon"></span>
</div>

于 2018-03-01T18:41:25.007 回答
2

你基本上只需要记住弹性项目默认可以收缩（flex-shrink: 1）。

禁用后flex-shrink，您应该一切就绪。

div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;    /* optional */
}

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* optional */
}

span:last-child {
  flex-shrink: 0;
}
<div>
  <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
  <span></span>
</div>

于 2018-03-01T18:52:10.797 回答