2 span in div，第一个自动宽度和溢出隐藏，第二个宽度自适应文本

Question

这是描述其缺点的演示 - https://jsfiddle.net/7t81gour/

.elem{
    position: relative;
    background: #ccc;
    width: 25%; /* adaptive width */
    height: 50px;
}

.text{
    position: absolute;
    text-align: center;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 0;
}

.text span:first-child{
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 4px;
}

.text,
.text span{
    display: inline-block;
    overflow: hidden;
}

<div class="elem"><div class="text"><span>Text text</span><span>0123</span></div></div>

<br>

<div class="elem"><div class="text"><span>Text text text text text text</span><span>0123456</span></div></div>

overflow: hidden 将在设置 max-width（第 18 行）[或任何定义的宽度] 的情况下起作用。问题是max-width由于他的parents自适应宽度不能用。我永远不会知道 span:first-child 的最大可能宽度（在同一行上尽可能多地显示文本）——我必须从 [=14 中减去（考虑到）span:last-child 的宽度=]？ - 不可能！

有什么想法吗？

Answer 1

这段代码有帮助吗？

提示：

使用 <span></span> 包裹行内元素。
我们 <div></div> 包装块元素。

#container {
  display: flex;
  border: 1px solid #eee;
  width: 85%;
  margin: auto;
}

.elem {
  background: #ccc;
  width: 25%;
  height: 70px;
  padding: 10px;
  margin: 10px;
}

.elem:last-child {
  flex-grow: 2;
}

.text {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: inherit;
  text-align: center;
}

<div id="container">
  <div class="elem">
    <div class="text">
      <span>
      <span>Text text</span><span>0123</span>
      </span>
    </div>
  </div>

  <br>

  <div class="elem">
    <div class="text">
      <!-- wrap your spans in another <span> 
    or <p> with setting margin and padding to 0 to prevent additional white spaces -->
      <span>
      <span>Text text text text text text text text </span><span>0123456</span>
      </span>
    </div>
  </div>

</div>

Answer 2

给你： https://jsfiddle.net/tomeralmog/rzx7uge5/

.elem{
    position: relative;
    background: #ccc;
    width: 25%; /* adaptive width */
    height: 50px;  
}

.text{
    position: absolute;
    text-align: center;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
    justify-content: center;
}

.text span:first-child{
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 4px;
    overflow: hidden;
}

.text span:last-child{
    white-space: nowrap;
}

<div class="elem">
  <div class="text">
    <span>Text text</span>
    <span>0123</span>
  </div>
</div>

<br>

<div class="elem">
  <div class="text">
    <span>Text text text text text text</span>
    <span>0123456</span>
  </div>
</div>

2 span in div，第一个自动宽度和溢出隐藏，第二个宽度自适应文本

2 span in div, first auto width and overflow hidden, second width is adaptive to text

html

css

responsive