Overflow: hidden + line-height — как подружить?

252

10 декабря 2016, 10:32

Всем привет столкнулся с проблемой, есть верстка, 3 дива, на 1 из них overflow: hidden, из-за чего едет базовая линия контейнера. как выровнять блоки в одну линию? Пример верстки добавил сюда: https://jsfiddle.net/ap11fxod/1/

.a { 
  height: 29px; 
  width: 500px; 
  background: #f231ad; 
  line-height: 29px; 
  padding: 0 10px; 
} 
.a > div { 
  display: inline-block; 
} 
.b { 
  overflow: hidden; 
  max-width: 370px; 
  white-space: nowrap; 
  font-size: 18px; 
  color: #FFF; 
} 
.c { 
  font-size: 14px; 
  padding: 0 5px; 
} 
.d { 
  font-size: 12px; 
  padding: 0 5px; 
}

<div class='a'> 
  <div class='b'> 
    БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ 
  </div> 
  <div class='c'> 
    Текст 1 
  </div> 
  <div class='d'> 
    Текст 2 
  </div> 
</div>

Answer 1

Все просто.

.a {
  display: flex;
}

.a { 
  height: 29px; 
  width: 500px; 
  background: #f231ad; 
  line-height: 29px; 
  padding: 0 10px; 
  display: flex; 
} 
.a > div { 
  display: inline-block; 
} 
.b { 
  overflow: hidden; 
  max-width: 370px; 
  white-space: nowrap; 
  font-size: 18px; 
  color: #FFF; 
} 
.c { 
  font-size: 14px; 
  padding: 0 5px; 
} 
.d { 
  font-size: 12px; 
  padding: 0 5px; 
}

<div class='a'> 
  <div class='b'> 
    БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ БОЛЬШОЙ ОСНОВНОЙ ТЕКСТ 
  </div> 
  <div class='c'> 
    Текст 1 
  </div> 
  <div class='d'> 
    Текст 2 
  </div> 
</div>

Answer 2

Как вариант — добавить vertical-align к внутренним блокам:

.a > div {
  display: inline-block;
  vertical-align: bottom;
}

bottom можно заменить на что-то другое по желанию. Блоки со свойством inline-block с помощью vertical-align выравниваются в строке друг относительно друга по высоте своими границами.