2 пролета в 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 нельзя использовать из-за адаптивной ширины его родителей. Я никогда не узнаю максимально возможную ширину (чтобы текст отображался как можно больше в одной строке) span:first-child - и мне нужно вычесть (принять во внимание) ширину span:last-child из max-width? - Ни за что!

Есть идеи?

Answer 1

Здесь вы go: 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>

Answer 2

Этот фрагмент помогает?

Подсказка:

• Используйте <span></span>, чтобы обернуть встроенные элементы.
• us <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>