1

Как сделать, чтобы при уменьшении ширины окна браузера, блок с текстом не переносился на другую строку, а увеличивался по высоте не меняя своего положения?

http://jsfiddle.net/u8bdrL3s/1/

HTML:

<div class="a">
  <div class="b">
    <div class="c">
    </div>
  </div>
  <div class="d">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст
  </div>
</div>

CSS:

.a {
  line-height: 30px;
  border: 1px solid #eee;
  font-weight: bold;
  height: 30px;
}
.b {
  display: inline-block;
  background-color: blue;
}
.c {
  display: inline-block;
  cursor: pointer;
  height: 25px;
  width: 25px;
  background-image: url("//habracdn.net/habr/images/1448626657/logo.svg?r=2");
  background-repeat: no-repeat;
  vertical-align: middle;
}
.d {
  display: inline-block;
  background-color: red;
}

1 ответ 1

2

http://jsfiddle.net/u8bdrL3s/2/

.a { white-space: nowrap; }
.d { white-space: normal; }
2
  • Здорово! А как убрать появление в таком случае горизонтального скрола, чтобы текст не выходил на границу видимости?
    – Ivan_Aka
    29 ноя 2015 в 21:59
  • @Ivan_Aka, .d { max-width: 90%; max-width: calc(100% - 25px); }, хотя не понимаю, почему его пробел не волнует... jsfiddle.net/u8bdrL3s/3
    – Qwertiy
    29 ноя 2015 в 23:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.