Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến khoảng cách văn bản

Các thuộc tính CSS liên quan đến khoảng cách văn bản

Bài viết này giải thích về các thuộc tính CSS liên quan đến khoảng cách văn bản.

Bạn có thể tìm hiểu về cách sử dụng và cách viết các thuộc tính như line-height và word-spacing.

YouTube Video

Tạo HTML để xem trước

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Kiểu Chữ (Liên Quan Đến Khoảng Cách Văn Bản)

Thuộc tính line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height là một thuộc tính CSS được sử dụng để thiết lập khoảng cách dòng (chiều cao dòng). line-height chỉ định khoảng cách theo chiều dọc giữa các dòng, được sử dụng để cải thiện khả năng đọc hoặc điều chỉnh khoảng cách như một phần của thiết kế.

Công dụng chính của line-height

Số không đơn vị 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Chỉ định chiều cao theo kích thước phông chữ. Ví dụ, chỉ định 1.5 sẽ đặt chiều cao dòng gấp 1.5 lần kích thước phông chữ. Phương pháp này hữu ích cho thiết kế đáp ứng.
Phần trăm 
1p {
2    line-height: 150%;
3}
  • Chỉ định chiều cao dòng dưới dạng phần trăm của kích thước phông chữ. Ví dụ, chỉ định 150% sẽ đặt chiều cao dòng bằng 150% kích thước phông chữ.
Giá trị cố định (px, em, rem, v.v.) 
1p {
2    line-height: 20px;
3}
  • Chỉ định chiều cao dòng bằng đơn vị tuyệt đối. Ví dụ, bạn có thể chỉ định một giá trị cụ thể như 20px, nhưng nó có thể thiếu tính linh hoạt trong thiết kế đáp ứng.
normal 
1p {
2    line-height: normal;
3}
  • Chỉ định normal sẽ áp dụng cài đặt khoảng cách dòng mặc định của trình duyệt. Thông thường, nó sẽ vào khoảng 1.2 đến 1.4 lần kích thước phông chữ.

Ví Dụ Về Việc Sử Dụng line-height

Đoạn văn dễ đọc
  • Thường khuyến nghị sử dụng line-height khoảng từ 1.5 đến 1.6 để cải thiện khả năng đọc. Nếu khoảng cách dòng quá hẹp, văn bản sẽ bị dồn lại và khó đọc, còn nếu quá rộng, văn bản sẽ cảm giác rời rạc.
Thiết kế tiêu đề
  • Đối với tiêu đề và đầu mục, nơi văn bản lớn hơn, khoảng cách dòng có thể được giảm xuống. Cài đặt như 1.1 hoặc 1.2 thường được sử dụng.

Tóm tắt

  • line-height là một thuộc tính quan trọng để cải thiện cả khả năng đọc và thiết kế của văn bản.
  • Sử dụng các giá trị tương đối (số hoặc phần trăm) giúp dễ dàng thích nghi với thiết kế đáp ứng.
  • Đối với tiêu đề có văn bản lớn và đoạn văn có văn bản nhỏ hơn, điều quan trọng là đặt khoảng cách dòng phù hợp cho từng loại.

Sử dụng thuộc tính này có thể làm cho văn bản dễ đọc hơn và nâng cao chất lượng thiết kế của nó.

Thuộc tính letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing là một thuộc tính CSS được sử dụng để điều chỉnh khoảng cách giữa các ký tự (khoảng cách chữ). Thuộc tính này có thể được sử dụng để làm sạch thiết kế văn bản, cải thiện khả năng đọc và đạt được các kiểu dáng cụ thể.

Trong ví dụ này, nó được chỉ định như sau.

  • bình thường: Khoảng cách chữ mặc định. Đây là một giá trị tiêu chuẩn được xác định bởi trình duyệt và phông chữ.
  • 4px: Một ví dụ về khoảng cách chữ được mở rộng. Thêm 4 pixel không gian giữa mỗi ký tự.
  • -1px: Một ví dụ về khoảng cách chữ bị thu hẹp. Giảm 1 pixel không gian giữa mỗi ký tự.

Cách Sử Dụng letter-spacing

Giá trị với đơn vị 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Thiết lập một giá trị dương sẽ tăng khoảng cách chữ cái.
  • Thiết lập một giá trị âm sẽ giảm khoảng cách chữ cái.
  • Đơn vị thường là px (pixel) hoặc em.
Mặc định: bình thường 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Sử dụng khoảng cách chữ mặc định. Thông thường, khoảng cách chữ tiêu chuẩn được định nghĩa bởi phông chữ sẽ được áp dụng.

Ví dụ về việc sử dụng letter-spacing

  • Cải thiện khả năng đọc: Đối với các cỡ chữ nhỏ hoặc phông chữ quá chật, bạn có thể cải thiện khả năng đọc bằng cách tăng letter-spacing.
  • Điều chỉnh thiết kế: Bạn có thể điều chỉnh khoảng cách chữ để nhấn mạnh trực quan các yếu tố thiết kế như tiêu đề hoặc logo.
  • Điều chỉnh giữa các từ: Bạn có thể điều chỉnh khoảng cách ở mức chữ cái, thay vì giữa các từ. letter-spacing điều chỉnh khoảng cách ở mức chữ cái, nhưng sử dụng word-spacing để mở rộng khoảng cách giữa các từ.
  • Cân bằng thiết kế: Nếu bạn tăng khoảng cách chữ quá nhiều, toàn bộ văn bản có thể trông quá kéo dài. Ngược lại, nếu bạn giảm khoảng cách quá nhiều, văn bản có thể trở nên chật chội và khó đọc, vì vậy cần duy trì một sự cân bằng phù hợp.

Tóm tắt

  • letter-spacing là một thuộc tính điều chỉnh khoảng cách giữa các chữ cái, ảnh hưởng đến cả thiết kế và khả năng đọc.
  • Bạn có thể tăng khoảng cách với các giá trị dương và giảm nó với các giá trị âm.
  • Nó hiệu quả cho tiêu đề và các yếu tố thiết kế cụ thể, nhưng cẩn thận đừng làm giảm khả năng đọc.

Bằng cách sử dụng thuộc tính này, bạn có thể điều chỉnh diện mạo văn bản và đạt được các thiết kế hấp dẫn.

Thuộc Tính word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing là một thuộc tính CSS điều chỉnh khoảng cách giữa các từ trong văn bản. Sử dụng đúng thuộc tính này có thể cải thiện cân bằng trực quan và khả năng đọc của văn bản. word-spacing đặc biệt hữu ích trong các thiết kế tập trung vào kiểu chữ và các tình huống thiết kế đáp ứng.

Trong ví dụ này, nó được chỉ định như sau.

  • normal: Áp dụng khoảng cách từ mặc định. Đây là giá trị ban đầu của trình duyệt.
  • 4px: Một ví dụ về khoảng cách từ tăng lên. Thêm 4 pixel khoảng cách giữa mỗi từ.
  • -1px: Một ví dụ về khoảng cách từ giảm đi. Giảm không gian giữa mỗi từ đi 1 pixel.
  • word-and-letter-spacing: Một ví dụ về giảm khoảng cách từ và chữ cái. Giảm không gian giữa các từ đi 0.1em và giữa các chữ cái đi 0.05em so với bình thường.

Sử Dụng Giá Trị Dương và Âm

Đặt giá trị dương cho word-spacing sẽ mở rộng khoảng cách từ. Mặt khác, sử dụng giá trị âm sẽ thu hẹp khoảng cách giữa các từ. Các giá trị âm có thể được sử dụng để nhấn mạnh hiệu ứng hình ảnh hoặc để thắt chặt khoảng cách chữ vì các lý do thiết kế cụ thể.

Sự Khác Biệt Với letter-spacing

word-spacing là thuộc tính điều chỉnh khoảng cách giữa các từ, trong khi letter-spacing điều chỉnh khoảng cách giữa các chữ cái. Bằng cách kết hợp các thuộc tính này, bạn có thể kiểm soát chính xác hơn kiểu chữ của toàn bộ văn bản.

Cảnh báo và Thực hành Tốt nhất

  • Điều chỉnh khoảng cách quá mức: Sử dụng quá nhiều word-spacing có thể dẫn đến giảm khả năng đọc. Đặc biệt, không gian quá lớn hoặc quá nhỏ có thể gây khó chịu cho người dùng, làm cho việc điều chỉnh vừa phải trở nên quan trọng.
  • Thiết kế phản hồi: Xác định các giá trị tương đối bằng cách sử dụng em hoặc rem rất hiệu quả cho thiết kế phản hồi vì nó đảm bảo hiển thị đúng trên các kích thước màn hình khác nhau.
  • Điều chỉnh kiểu tiêu đề: Bằng cách mở rộng khoảng cách giữa các từ trong văn bản tiêu đề, bạn có thể thêm điểm nhấn hình ảnh. Điều này cho phép bạn làm rõ thứ bậc của nội dung và đạt được một thiết kế tinh tế.

Thuộc tính word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break là một thuộc tính CSS kiểm soát cách văn bản sẽ được gói khi vượt quá chiều rộng của container. Thông thường, trình duyệt sẽ ngắt dòng tại ranh giới từ, nhưng các thiết lập cụ thể có thể cải thiện vẻ ngoài và khả năng đọc khi có từ dài hoặc URL.

Bạn có thể chỉ định các giá trị sau cho thuộc tính word-break.

  • normal

    normal là giá trị mặc định. Khi một từ vượt qua chiều rộng của container, nó sẽ ngắt tại ranh giới từ. Thiết lập này phổ biến ở các ngôn ngữ như tiếng Anh, và ngắt dòng không diễn ra ở giữa từ.

  • break-all

    break-all là thiết lập cho phép ngắt dòng sau bất kỳ ký tự nào khi cần thiết. Đặc biệt khi có từ dài hoặc URL, việc ngắt dòng diễn ra tại cấp ký tự để tránh gián đoạn bố cục.

  • keep-all

    keep-all là một thiết lập được sử dụng đặc biệt cho các ngôn ngữ châu Á (Nhật Bản, Trung Quốc, Hàn Quốc, v.v.). Trong thiết lập này, toàn bộ từ được giữ nguyên, và không có sự ngắt dòng giữa từ. Tuy nhiên, đối với các ngôn ngữ phân tách bằng khoảng trắng như tiếng Anh, ngắt dòng ở ranh giới từ sẽ được áp dụng.

Ví dụ này cho thấy ba thiết lập khác nhau của word-break. Với word-break-normal, toàn bộ từ được giữ nguyên và ngắt tại ranh giới từ nếu nó vượt qua chiều rộng của container. Với word-break-break-all, ngắt dòng xảy ra ngay cả ở giữa từ. word-break-keep-all cho phép ngắt tự nhiên cho các ngôn ngữ châu Á như tiếng Nhật và ngắt tại ranh giới từ với tiếng Anh.

Các trường hợp ứng dụng word-break

Thiết bị di động và thiết kế đáp ứng 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Trên các thiết bị di động, chiều rộng màn hình bị giới hạn, điều này có thể khiến văn bản bao gồm URL hoặc từ dài vượt qua chiều rộng màn hình. Trong những trường hợp như vậy, áp dụng word-break: break-all; cho phép ngắt dòng ở cấp ký tự để phù hợp với chiều rộng màn hình, cải thiện khả năng đọc.

Thuộc tính hyphens 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • Thuộc tính hyphens được sử dụng trong CSS để xác định cách xử lý gạch nối từ (chia từ bằng dấu gạch nối) khi ngắt dòng văn bản. Bằng cách thiết lập thuộc tính này một cách phù hợp, bạn có thể cải thiện tính dễ đọc và giao diện của văn bản. Gạch nối đặc biệt hữu ích khi cần ngắt các từ dài.

  • Vì quy tắc gạch nối thay đổi theo từng ngôn ngữ, thuộc tính này phụ thuộc vào ngôn ngữ của văn bản.

Cú pháp 

1element {
2    hyphens: none | manual | auto;
3}

Thuộc tính hyphens có thể được thiết lập với các giá trị sau:.

  • none: Không áp dụng gạch nối. Các từ thông thường sẽ chỉ bị ngắt ở cuối từ.
  • manual: Gạch nối được áp dụng thủ công. Trong trường hợp này, bạn cần chỉ định điểm gạch nối thủ công trong HTML. Ví dụ, bạn có thể sử dụng &shy; (dấu gạch nối mềm).
  • auto: Trình duyệt tự động áp dụng gạch nối tại các vị trí phù hợp. Trong trường hợp này, ngôn ngữ của tài liệu (thuộc tính lang) phải được chỉ định chính xác.

Ghi chú

  • Tầm quan trọng của cài đặt ngôn ngữ: Khi sử dụng hyphens: auto;, việc gạch nối đúng yêu cầu thuộc tính lang của tài liệu HTML phải được đặt chính xác.
  • Phụ thuộc vào phông chữ: Một số phông chữ có thể không phù hợp để gạch nối.
  • Sử dụng từ điển gạch nối: Quy tắc gạch nối phụ thuộc vào các từ điển được trình duyệt sử dụng. Do đó, nó có thể không hoạt động như mong đợi đối với một số ngôn ngữ nhất định.

Tóm tắt

Bằng cách sử dụng đúng thuộc tính hyphens, bạn có thể cải thiện đáng kể bố cục văn bản. Đặc biệt đối với các trang web đa ngôn ngữ và thiết kế thân thiện với thiết bị di động, việc sử dụng auto và manual thích hợp có thể nâng cao trải nghiệm người dùng.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến văn bảnCác thuộc tính CSS cho hiển thị mã và trích dẫn