Thuộc tính hyphens

Thuộc tính hyphens bật tính năng ngắt từ trong trình duyệt bằng dấu gạch nối "-". Để hỗ trợ tiếng Việt cần thêm thuộc tính lang="vi" vào thẻ được áp dụng ngắt từ (hoặc vào phần tử cha của thẻ đó). Có thể chỉ cần thêm thuộc tính này vào thẻ html. Nếu không có điều này thì tính năng ngắt từ sẽ không hoạt động.

Cú pháp

cssbộ chọn {
  hyphens: auto | manual | none;
}

Giá trị

Giá trị	Mô tả
`auto`	Đặt dấu gạch nối ở những vị trí cần thiết.
`manual`	Thêm dấu gạch nối chỉ ở những vị trí đã thêm thẻ `wbr` hoặc ký tự đặc biệt `` và chỉ khi cần thiết. Những dấu gạch nối như vậy được gọi là mềm.
`none`	Hủy bỏ việc đặt dấu gạch nối (các từ sẽ không bị ngắt, ngay cả khi có dấu gạch nối mềm).

Giá trị mặc định: manual.

Giá trị auto

html<p lang="en">
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
  fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
  sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
  ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
  ante purus lacini dui, interdum fringilla massa eros ut duir
  nullam et ipsum ex. Donec ut iaculis massa. Duis vel ulamcor
  per dolor. Suspendisse tristique dolor risus, nec laoreet du
  aliquet maximus. Maecenas tempus congue arcu, si amet auctor
  dui efficitur in. Proin ac auctor nisi. Phasellus luctus eur
  neque sollicitudin rutrum. Curabitur ipsum justo, sodales in
  lectus non, molestie ullamcorper elit, orciro varius natoque.
</p>

cssp {
  width: 400px;
  hyphens: auto;
  border: 1px solid red;
  text-align: justify;
}

Результат:

Xem thêm

thuộc tính word-break và overflow-wrap,
cho phép ngắt các chữ cái của một từ dài
thuộc tính overflow,
cắt bỏ các phần chữ nhô ra ngoài ranh giới của khối