4

Ребята ситуация такова:

.mytext {
  width: 120px;
  padding: 0px 10px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px #c6c6c6 solid;
}

.mytext2 {
  margin-top:10px;
  width: 120px;
  padding: 0px 10px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px #c6c6c6 solid;
}
<div class="mytext">Тест</div>

<div class="mytext2">Тестовая информация</div>

Мне необходимо, что бы в зависимости от текста который вставляется в блок изменялся параметр line-height. Более чем 2 строки текста никогда не бывает, поэтому, если текст не поместился в одну строку нужно применить line-height:18px. Как это можно сделать с помощью css? Или тут прибегать нужно к js?

4
  • Да, без js тут никак
    – Cheg
    10 сен 2017 в 8:59
  • Правильно ли я понял, что вам просто нужно уместить текст посередине блока?
    – Cheg
    10 сен 2017 в 9:02
  • У меня эти блоки выводятся циклом. Как определить по каждому из блоков с помощью js вмещается ли в него текст, и если нет то применить line-height?
    – WhoIsDT
    10 сен 2017 в 9:02
  • Да все верно. Вместить нужно по центру блока (по вертикали)
    – WhoIsDT
    10 сен 2017 в 9:03

1 ответ 1

4

Чтобы выровнить положение текста по вертикали, необязательно менять line-height. Достаточно обернуть текст внутри блоков в другой элемент, например, p, и этому p задать display:inline-block; (и vertical-align:middle; при необходимости) и задать ему line-height сразу с учетом того, что текста будет на 2 строки:

.mytext {
  width: 120px;
  padding: 0px 10px;
  text-align: center;
  line-height: 30px;
  height: 30px;
  border: 1px #c6c6c6 solid;
}

.mytext2 {
  margin-top: 10px;
}

.mytext>p {
  display: inline-block;
  line-height: 15px;
  margin: 0px;
  padding: 0px;
}
<div class="mytext">
  <p>Тест</p>
</div>

<div class="mytext mytext2">
  <p>Тестовая информация</p>
</div>

1
  • Обязательно!:))
    – WhoIsDT
    10 сен 2017 в 9:37

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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