Высота строки для всех, кроме первой строки

0

Ниже, как добавить вертикальные пробелы, где указано "увеличить интервал". line-height повлияет на весь right прямоугольник, но я хочу добавить пробел только тогда, когда строка внутри right пробегает и ломается.

Изображение 174551

См. Http://jsfiddle.net/dhT8E/

<div class="box">
    <div class="item">
      <div class="left">Left Text 1</div>
      <div class="right">Right Text 1</div>
    </div>
    <div class="item">
      <div class="left">Left Text 2</div>
      <div class="right">
        <div class="horizontal">Stacked Box 1</div>
        <div class="horizontal">Stacked Box 2</div>
        <div class="horizontal">Stacked Box 3</div>
      </div>
    </div>
    <div class="item">
      <div class="left">Left Text 3</div>
      <div class="right">Right Text 2</div>
    </div>
</div>

.box {width:350px; height:150px; border:solid}
.item {padding-bottom:8px;}
.left {position:absolute;}
.right {padding-left:100px; padding-after:20px;}
.horizontal {display: inline-block; padding-right: 20px}
  • 0
    не понимаешь что говоришь?
  • 0
    ты говоришь так: jsfiddle.net/dhT8E/2
Показать ещё 7 комментариев
Теги:

3 ответа

1
Лучший ответ

line-height - это то, что вам нужно.

.box {
   line-height: 26px; /* adjust to your needs */
}

Правда,

line-height повлияет на весь правый прямоугольник

... но исправить это - просто удалите/измените нижнее дополнение на ваших элементах.

FIDDLE

Поделиться
  • 1
    Решает это, большое спасибо!
1

Мой предложенный ответ заключается в том, чтобы применить padding-bottom на.left,.right и. Horizontal, но UNDO - padding-bottom на этих.right и.left, которые содержат горизонтальную. Я использую.nodrop для этого. Пустым.left и.right можно управлять с минимальной высотой.

http://jsfiddle.net/dhT8E/ HTML:

<div class="box">
    <div class="item">
      <div class="left">Left Text 1</div>
      <div class="right">Right Text 1</div>
    </div>
    <div class="item">
      <div class="left">Left Text 2</div>
      <div class="right nodrop">
        <div class="horizontal">Stacked Box 1</div>
        <div class="horizontal">Stacked Box 2</div>
        <div class="horizontal">Stacked Box 3</div>
      </div>
    </div>
    <div class="item">
      <div class="left">Left Text 3</div>
      <div class="right">Right Text 2</div>
    </div>
</div>

CSS:

.box {width:350px; height:150px; border:solid}
.left {position:absolute;}
.right{padding-left:100px; padding-after:20px;}
.left, .right { padding-bottom: 8px; }

.horizontal{display: inline-block; padding-right: 20px; padding-bottom: 8px; }
.item .nodrop { padding-bottom: 2px; }
Поделиться
1

Если я правильно понимаю, вы ищете какую-то условную линию-высоту? Если в поле содержится более двух строк, длина строк этих строк должна быть увеличена, но все однострочные тексты должны оставаться неизменными?

Я думаю, вы должны подходить к проблеме под другим углом. Возможным решением является увеличение высоты строки по умолчанию, влияющей на весь текст, а затем корректировка одиночных строк с отрицательным отступлением или уменьшением заполнения.

Например, если вам нужна линия высотой 20 пикселей для одиночных строк и высота строки 30 пикселей для нескольких строк, установите высоту линии на 30 пикселей и отрицательный запас (или уменьшенное заполнение) 10 пикселей на самом ящике.

<p>Single line</p>
<p>Multiple lines with<br />increased spacing</p>
<p>Single line</p>
<p>Single line</p>

p {
    font-size: 16px;
    line-height: 30px;
    margin: -5px 0;
    padding: 0;
}

Рабочий пример @http://jsfiddle.net/xw3af/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню