Как изменять line-height в зависимости от того, вмещается ли контент в блок

#javascript #html #css #css3 #html5

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



.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;
}
Тест

Тестовая информация




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

Ответы

Ответ 1

Чтобы выровнить положение текста по вертикали, необязательно менять 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;
}

  
Тест



  
Тестовая информация