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 */
}
* { margin: 0; }
code {
display: inline;
white-space: pre;
line-height: .9em; /* doesn't work */
}
code {
display: block;
white-space: pre;
line-height: .9em; /* works */
}
code {
display: block;
white-space: pre;
line-height: 2em; /* works */
}
The The property specifies two things:white-space
CSS property sets how white space inside an element is handled.Try it
Syntax
/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;
The white-space
property is specified as a single keyword
chosen from the list of values below.
Values
normal
Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
nowrap
Collapses white space as for normal
, but suppresses line breaks [text wrapping] within the source.
pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at
elements.
pre-wrap
Sequences of white space are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.
pre-line
Sequences of white space are
collapsed. Lines are broken at newline characters, at
, and as necessary to fill line boxes.
break-spaces
The behavior is identical to that of pre-wrap
, except that:
- Any sequence of preserved white space always takes up space, including at the end of the line.
- A line breaking opportunity exists after every preserved white space character, including between white space characters.
- Such preserved spaces take up space and do not hang, and thus affect the box's intrinsic sizes [min-content size and max-content size].
The following table summarizes the behavior of the various white-space
values:
Note: There is a distinction made between spaces and other space separators. These are defined as follows:
spacesSpaces [U+0020], tabs [U+0009], and segment breaks [such as newlines].
other space separatorsAll other space separators defined in Unicode, other than those already defined as spaces.
Where white space is said to hang, this can affect the size of the box when measured for intrinsic sizing.
Collapsing of white space
The CSS Text specification contains a Collapsing and Transformation section that precisely defines what "white space is collapsed" means, including an example with an illustration. Usually, it means reducing sequences of multiple white-space characters down to a single space character — though in some cases it means reducing them to no character [the empty string].
Formal definition
Formal syntax
white-space =
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
Examples
Basic example
code {
white-space: pre;
}
Line breaks inside elements
pre {
white-space: pre-wrap;
}
In action
HTML
p { white-space:
normal
nowrap
pre
pre-wrap
pre-line
break-spaces
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.box {
width: 300px;
padding: 16px;
border-radius: 10px;
}
#css-code {
background-color: rgb[220, 220, 220];
font-size: 16px;
font-family: monospace;
}
#css-code select {
font-family: inherit;
}
#results {
background-color: rgb[230, 230, 230];
overflow-x: scroll;
height: 400px;
white-space: normal;
font-size: 14px;
}
const select = document.querySelector["#css-code select"];
const results = document.querySelector["#results p"];
select.addEventListener["change", [e] => {
results.setAttribute["style", `white-space: ${e.target.value}`];
}]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Result
Specifications
Unknown specification # white-space-property |
Browser compatibility
BCD tables only load in the browser
See also
- Properties
that define how words break within themselves:
overflow-wrap
,word-break
,hyphens