Các tiện ích để kiểm soát thuộc tính white-space của một phần tử.
| Class | Styles |
|---|---|
whitespace-normal | white-space: normal; |
whitespace-nowrap | white-space: nowrap; |
whitespace-pre | white-space: pre; |
whitespace-pre-line | white-space: pre-line; |
whitespace-pre-wrap | white-space: pre-wrap; |
whitespace-break-spaces | white-space: break-spaces; |
Sử dụng tiện ích whitespace-normal để làm cho văn bản xuống dòng bình thường trong một phần tử. Các dòng mới và khoảng trắng sẽ được thu gọn:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-normal">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Sử dụng tiện ích whitespace-nowrap để ngăn văn bản xuống dòng trong một phần tử. Các dòng mới và khoảng trắng sẽ được thu gọn:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="overflow-auto whitespace-nowrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Sử dụng tiện ích whitespace-pre để bảo tồn các dòng mới và khoảng trắng trong một phần tử. Văn bản sẽ không bị xuống dòng:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="overflow-auto whitespace-pre">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Sử dụng tiện ích whitespace-pre-line để bảo tồn các dòng mới nhưng không bảo tồn khoảng trắng trong một phần tử. Văn bản sẽ được xuống dòng bình thường:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-pre-line">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Sử dụng tiện ích whitespace-pre-wrap để bảo tồn các dòng mới và khoảng trắng trong một phần tử. Văn bản sẽ được xuống dòng bình thường:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-pre-wrap">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Sử dụng tiện ích whitespace-break-spaces để bảo tồn các dòng mới và khoảng trắng trong một phần tử. Khoảng trắng ở cuối dòng sẽ không bị treo mà sẽ xuống dòng tiếp theo:
Hey everyone! It’s almost 2022 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.
<p class="whitespace-break-spaces">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>Prefix a white-space utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.