CODEWITHSUNDEEP
htmlcss
u17
u17

Reputation: 2824

Line-height for all but the first line

Below, how can I add vertical whitespace where it says "increase spacing". line-height would affect the entire right box, but I want addidional whitespace only when a line inside right runs over and breaks.

enter image description here

See 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}

Upvotes: 0

Views: 1532

Answers (3)

Chris Walsh
Chris Walsh

Reputation: 3523

My proposed answer is to apply padding-bottom on .left, .right and .horizontal but UNDO the padding-bottom on those .right and .left that contain a .horizontal. I use .nodrop to do this. Empty .left and .right can be managed with a min-height.

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; }

Upvotes: 1

Sander van Leeuwen
Sander van Leeuwen

Reputation: 51

If I understand correctly, you're looking for some sort of conditional line-height? When a box contains more than two lines the line-height of those lines should be increased, but all single-line texts should remain unchanged?

I think you should approach the problem from another angle. A possible solution is to increase the default line height, affecting all text, and then correcting the single lines with a negative margin or reduced padding.

For example, if you want a line-height of 20px for single lines, and a line-height of 30px for multiple lines, set the line-height on 30px and a negative margin (or reduced padding) of 10px on the box itself.

<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;
}

Working example @ http://jsfiddle.net/xw3af/

Upvotes: 1

Danield
Danield

Reputation: 125463

line-height is what you need.

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

True,

line-height would affect the entire right box

... but to fix that up - just remove / change the bottom padding on your items.

FIDDLE

Upvotes: 1

Related Questions