hyphenate-character

Try it

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<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;
  hyphens: auto;
}

Cú pháp

hyphenate-character: <string>;
hyphenate-character: auto;

Giá trị này đặt chuỗi dùng thay cho gạch nối, hoặc cho biết tác nhân người dùng nên chọn một chuỗi phù hợp dựa trên các quy ước kiểu chữ hiện hành (mặc định).

Giá trị

<string>

<string> được sử dụng ở cuối dòng trước một điểm ngắt gạch nối. Tác nhân người dùng có thể cắt bớt giá trị này nếu quá nhiều ký tự được dùng.

auto

Tác nhân người dùng chọn một chuỗi phù hợp dựa trên các quy ước kiểu chữ của ngôn ngữ nội dung. Đây là giá trị mặc định của thuộc tính và chỉ cần đặt tường minh khi muốn ghi đè một giá trị kế thừa khác.

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

Cú pháp hình thức

hyphenate-character = 
  auto      |
  <string>  

Ví dụ

Ví dụ này hiển thị hai khối văn bản giống nhau có hyphens được đặt để đảm bảo chúng ngắt dòng bất cứ khi nào cần thiết, và tại các điểm ngắt gạch nối mềm (được tạo bằng ­). Khối đầu tiên có giá trị của gạch nối được đổi thành ký hiệu bằng (=). Khối thứ hai không đặt hyphenate-character, tương đương với hyphenate-character: auto đối với các tác nhân người dùng hỗ trợ thuộc tính này.

HTML

<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="vi">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="vi">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

Kết quả

Đặc tả kỹ thuật

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

Xem thêm

• Các thuộc tính CSS liên quan: hyphens, overflow-wrap.