hyphens

Try it

hyphens: none;

hyphens: manual;

hyphens: auto;

<section id="default-example">
  <p id="example-element">An extra­ordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
}

Quy tắc gạch nối phụ thuộc vào ngôn ngữ. Trong HTML, ngôn ngữ được xác định bởi thuộc tính lang, và trình duyệt sẽ gạch nối chỉ khi thuộc tính này có mặt và từ điển gạch nối phù hợp được cài đặt. Trong XML, thuộc tính xml:lang phải được sử dụng.

Nếu được hỗ trợ, hyphenate-character có thể được dùng để chỉ định một ký tự gạch nối thay thế ở cuối dòng đang ngắt.

Cú pháp

/* Giá trị từ khóa */
hyphens: none;
hyphens: manual;
hyphens: auto;

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

Thuộc tính hyphens được chỉ định là một giá trị từ khóa đơn được chọn từ danh sách bên dưới.

Giá trị

none

Các từ không bị ngắt tại điểm xuống dòng, ngay cả khi các ký tự bên trong từ gợi ý điểm ngắt dòng. Các dòng chỉ ngắt tại khoảng trắng.

manual

Giá trị mặc định. Các từ chỉ bị ngắt để xuống dòng tại những chỗ mà các ký tự bên trong từ gợi ý cơ hội ngắt dòng. Xem Gợi ý cơ hội ngắt dòng bên dưới để biết chi tiết.

auto

Trình duyệt được tự do tự động ngắt từ tại các điểm gạch nối phù hợp, theo bất kỳ quy tắc nào nó chọn. Tuy nhiên, các cơ hội ngắt dòng được gợi ý (xem Gợi ý cơ hội ngắt dòng bên dưới) sẽ ghi đè việc lựa chọn điểm ngắt tự động khi có mặt.

Gợi ý cơ hội ngắt dòng

Có hai ký tự Unicode được dùng để chỉ định thủ công các điểm ngắt dòng tiềm năng trong văn bản:

U+2010 (HYPHEN)

Ký tự gạch nối "cứng" chỉ ra cơ hội ngắt dòng hiển thị. Ngay cả khi dòng không thực sự ngắt tại điểm đó, gạch nối vẫn được hiển thị.

U+00AD (SHY)

Một gạch nối "mềm" vô hình. Ký tự này không được hiển thị; thay vào đó, nó đánh dấu một chỗ mà trình duyệt nên ngắt từ nếu cần gạch nối. Trong HTML, dùng ­ để chèn gạch nối mềm.

Định nghĩa hình thức

Cú pháp hình thức

hyphens = 
  none    |
  manual  |
  auto    

Ví dụ

Chỉ định gạch nối văn bản

Ví dụ này sử dụng ba lớp, một lớp cho mỗi cấu hình có thể của thuộc tính hyphens.

HTML

<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="vi" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="vi" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="vi" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• content
• overflow-wrap (trước đây là word-wrap)
• word-break
• Hướng dẫn ngắt và xuống dòng văn bản