white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính white-space của CSS thiết lập cách xử lý khoảng trắng bên trong một phần tử.

Try it

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section class="default-example" id="default-example">
  <div id="example-element">
    <p>
      But ere she from the church-door stepped She smiled and told us why: 'It
      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and
      smiled, and passed it off Ere from the door she stept—
    </p>
  </div>
</section>

#example-element {
  width: 16rem;
}

#example-element p {
  border: 1px solid #c5c5c5;
  padding: 0.75rem;
  text-align: left;
}

Thuộc tính này chỉ định hai điều:

Khoảng trắng có bị thu gọn hay không và như thế nào.
Các dòng có được xuống dòng hay không và như thế nào.

Note: Để ngắt từ bên trong chính nó, hãy dùng overflow-wrap, word-break, hoặc hyphens thay thế.

Thuộc tính cấu thành

Thuộc tính này là viết tắt cho các thuộc tính CSS sau:

Note: Đặc tả định nghĩa thêm một thuộc tính cấu thành thứ ba: white-space-trim, thuộc tính này chưa được triển khai trong bất kỳ trình duyệt nào.

Cú pháp

css

/* Giá trị từ khóa đơn */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Giá trị viết tắt white-space-collapse và text-wrap-mode */
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;
white-space: preserve nowrap;

/* Giá trị toàn cục */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Các giá trị của thuộc tính white-space có thể được chỉ định là một hoặc hai từ khóa đại diện cho các giá trị của thuộc tính white-space-collapse và text-wrap-mode, hoặc các từ khóa đặc biệt sau:

normal: Các chuỗi khoảng trắng được thu gọn. Ký tự xuống dòng trong nguồn được xử lý giống như các khoảng trắng khác. Các dòng được ngắt khi cần thiết để lấp đầy hộp dòng. Tương đương với collapse wrap.
pre: Các chuỗi khoảng trắng được bảo toàn. Các dòng chỉ bị ngắt tại ký tự xuống dòng trong nguồn và tại các phần tử <br>. Tương đương với preserve nowrap.
pre-wrap: Các chuỗi khoảng trắng được bảo toàn. Các dòng bị ngắt tại ký tự xuống dòng, tại <br>, và khi cần thiết để lấp đầy hộp dòng. Tương đương với preserve wrap.
pre-line: Các chuỗi khoảng trắng được thu gọn. Các dòng bị ngắt tại ký tự xuống dòng, tại <br>, và khi cần thiết để lấp đầy hộp dòng. Tương đương với preserve-breaks wrap.

Note: Thuộc tính white-space với tư cách là viết tắt là tính năng tương đối mới (xem khả năng tương thích trình duyệt). Ban đầu, nó có sáu giá trị từ khóa; hiện tại, giá trị nowrap được hiểu là giá trị cho text-wrap-mode, trong khi break-spaces được hiểu là giá trị cho white-space-collapse. Bốn từ khóa trên vẫn dành riêng cho white-space, nhưng chúng có các thuộc tính viết dài tương đương. Sự thay đổi để white-space trở thành viết tắt mở rộng các giá trị chấp nhận được sang nhiều từ khóa và tổ hợp hơn, chẳng hạn như wrap và collapse.

Bảng sau đây tóm tắt hành vi của bốn giá trị từ khóa white-space này:

	Dòng mới	Khoảng trắng và tab	Xuống dòng văn bản	Khoảng trắng cuối dòng	Dấu phân cách khoảng trắng cuối dòng khác
`normal`	Thu gọn	Thu gọn	Xuống dòng	Xóa	Treo
`pre`	Bảo toàn	Bảo toàn	Không xuống dòng	Bảo toàn	Không xuống dòng
`pre-wrap`	Bảo toàn	Bảo toàn	Xuống dòng	Treo	Treo
`pre-line`	Bảo toàn	Thu gọn	Xuống dòng	Xóa	Treo

Tab mặc định là 8 khoảng trắng và có thể được cấu hình bằng thuộc tính tab-size. Trong trường hợp các giá trị normal, nowrap, và pre-line, mỗi tab được chuyển đổi thành ký tự khoảng trắng (U+0020).

Note: Có sự phân biệt giữa khoảng trắng và dấu phân cách khoảng trắng khác. Chúng được định nghĩa như sau:

khoảng trắng: Dấu cách (U+0020), tab (U+0009) và ngắt đoạn (chẳng hạn như xuống dòng).
dấu phân cách khoảng trắng khác: Tất cả các dấu phân cách khoảng trắng khác được định nghĩa trong Unicode, ngoài những dấu đã được định nghĩa là khoảng trắng.

Khi khoảng trắng được cho là treo, điều này có thể ảnh hưởng đến kích thước của hộp khi đo cho kích thước nội tại.

Định nghĩa chính thức

Initial value	`normal`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Cú pháp chính thức

white-space = 
  normal                                              |
  pre                                                 |
  pre-wrap                                            |
  pre-line                                            |
  <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>  

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap  

<white-space-trim> = 
  none                                              |
  discard-before || discard-after || discard-inner

Ví dụ

Ví dụ cơ bản

css

code {
  white-space: pre;
}

Ngắt dòng bên trong phần tử <pre>

css

pre {
  white-space: pre-wrap;
}

Thực tế

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    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.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: gainsboro;
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

Kiểm soát xuống dòng trong bảng

HTML

html

<table>
  <tbody>
    <tr>
      <td></td>
      <td>Nội dung rất dài bị tách</td>
      <td class="nw">Nội dung rất dài không bị tách</td>
    </tr>
    <tr>
      <td class="nw">white-space:</td>
      <td>normal</td>
      <td>nowrap</td>
    </tr>
  </tbody>
</table>

CSS

css

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Kết quả

Nhiều dòng trong phần tử SVG text

Thuộc tính CSS white-space có thể được dùng để tạo nhiều dòng trong phần tử <text>, vốn không tự xuống dòng theo mặc định.

HTML

Văn bản bên trong phần tử <text> cần được chia thành nhiều dòng để các dòng mới được nhận diện. Sau dòng đầu tiên, phần còn lại cần được xóa khoảng trắng đầu dòng.

html

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>