CODEWITHSUNDEEP
cssline-breaks
Howard
Howard

Reputation: 3758

Is there a way a white-space: pre-wrap; text's next line spacing can be larger?

I have some text that I have using 

white-space: pre-wrap;

It looks good but I'd like to increase the spacing for next lines in the text. Is there a way to do this?

Example:

Hello. 
World.

Expected result:

Hello.

World.

Upvotes: 2

Views: 16466

Answers (2)

Jeroen W
Jeroen W

Reputation: 872

Not really. You can use line-height, but this will also add spacing to the top of the first line. You can try to alter the position of the whole block with a negative top margin and a position relative.

white-space: pre-wrap;                
line-height: 30px;
position: relative;
top: -15px;

Hope this helps.

Upvotes: 4

paulmccann
paulmccann

Reputation: 81

Zero out your margin on the element, and put a display: block on it if it doesn't already have one... Set your line-height for the whole block... Then set a ::first-line on it, with appropriate line-height for the space you want. Use a decimal fraction to reduce the first line height even more. See my snippet.

I prefer using code tags for this sort of thing since pre tags seem to have issues with indentation (either tabs or spaces) on the tag in the text editor, as well as inconsistencies with either larger or smaller em units.

So to control line-height when using white-space: pre; or white-space: pre-wrap; you'll get consistent results (Chrome, Safari, FF, IE10) with display-blocked, margin-zero-ed code tags:

* { margin: 0; }
  

code {
 display: inline;
 white-space: pre;
 line-height: .9em; /* doesn't work */
}
code.block {
  display: block;
  white-space: pre;
  line-height: .9em; /*  works */
}
code.block-doubled {
  display: block;
  white-space: pre;
  line-height: 2em; /*  works */
}
code.block-doubled::first-line {
  display: block;
  white-space: pre;
  line-height: .9em; /*  works */
}
<pre>
  * { margin: 0; }
 </pre>
  <code>
  code {
  display: inline;
  white-space: pre;
  line-height: .9em; /* doesn't work */
  }
  </code>
  <code class="block">
  code {
  display: block;
  white-space: pre;
  line-height: .9em; /* works */
  }
  </code>
  <code class="block-doubled">
  code {
  display: block;
  white-space: pre;
  line-height: 2em; /* works */
  }
  </code>

Upvotes: 2

Related Questions