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

220
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 выравниваются в строке друг относительно друга по высоте своими границами.

READ ALSO
Как делать активными пункты меню при прокрутке страницы?

Как делать активными пункты меню при прокрутке страницы?

Сайт одностраничный, при нажатии ссылки переходит на определенную позицию на страницеИ никак не получается сделать ссылку меню активной...

296
Что означает атрибут crossorigin у элемента img?

Что означает атрибут crossorigin у элемента img?

Как я понял атрибут crossorigin - для обработки запросов с других источниковПеречитал интернет, так толком и не понял смысл атрибута

243
Проблема с бэкграунд имедж

Проблема с бэкграунд имедж

[![введите сюда описание изображения][1]][1]

205
Есть ли способ закрасить каждое слово?

Есть ли способ закрасить каждое слово?

К примеру есть такая конструкция :

201