CSS study notes (c) white space and line breaks

Whitespace

Definitions : white space refers to spaces, tabs and carriage returns, HTML by default and will comply with all the blank into a space .

white-space

white-space: normal; // merge whitespace, wrap 
white-space: nowrap; // merge whitespace, not wrap 
white-space: pre-line; // merge whitespace (excluding line feed), automatic wrap 
white-space: pre; // do not merge whitespace, wrap 
white-space: pre-nowrap; // do not merge whitespace, not wrap

[Note] pre elements with default style white-space: pre;

 

Text wrap

word-wrap: wrap used to achieve long words or addresses url

word-wrap: normal; // browser only wrap in half size and the hyphen 
word-wrap: break-word; // long words from the beginning of the next line

[Note] is when the white-space nowrap or pre, word-break and word-wrap are invalid

word-break: The method used to determine the processing wrap

word-break: break-all;
word-break: kepp-all;

form

For long table cell text, using word-wrap or word-break to force a line to set table-layout: fixed

 

Pseudo-element wrap

　　There is a Unicode character, is specialized on behalf of line breaks: 0x000A, in CSS, writing '\ 000A', it can be abbreviated as '\ A'

　　However, since the browser will merge whitespace. Therefore, it is necessary to prevent the use of pre merger whitespace

<style>
dt,dd{display:inline;}
dd{margin: 0;font-weight:bold;}
dd+dt::before{content:'\A';white-space:pre;}
dd+dd::before{content:',';font-weight:normal;}
</style>
<dl>
  <dt>姓名:</dt>
  <dd>小火柴</dd>
  <dt>邮箱:</dt>
  <dd>[email protected]</dd>
  <dd>[email protected]</dd>  
</dl>