Hướng dẫn word-wrap css with hyphen - word-wrap css với dấu gạch nối

Tôi muốn phá vỡ từ dài với dấu gạch nối ở cuối dòng đầu tiên.

Expected:

BERUFSBILDUNGSZENT-
RUM

Hiểu rồi:

BERUFSBILDUNGSZENT
RUM

Đây là HTML và CSS của tôi:

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

Bạn có thể kiểm tra jsfiddle của tôi

Đã hỏi ngày 9 tháng 3 năm 2017 lúc 2:52Mar 9, 2017 at 2:52

4

Chrome không làm được gạch nối rõ ràng (ít nhất là trên Windows). Bạn có thể tốt hơn với các trình duyệt hoặc nền tảng khác. Bạn có thể sử dụng ­ (dấu gạch nối mềm) nếu bạn biết trước nơi bạn muốn phá vỡ. Mặt khác, ít nhất là trong Chrome trên Windows, không có cách nào để có được dấu gạch nối khi CSS phá vỡ một từ dài, trừ khi nó nằm trong đầu vào để bắt đầu.

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

Using soft hyphen:
BERUFSBILDUNGSZEN­TRUM
    

Using automatic hyphenation (doesn't work in Chrome)
BERUFSBILDUNGSZENTRUM

Soft hyphen not displayed if it doesn't break there
BERUFSBILDUNGSZEN­TRUM

Xem thêm câu trả lời này.

Đã trả lời ngày 9 tháng 3 năm 2017 lúc 3:14Mar 9, 2017 at 3:14

4

Giải pháp vào năm 2022:

Nếu bạn thêm thuộc tính

BERUFSBILDUNGSZENT
RUM

0 vào div của bạn và gõ "berufsbildungszentrum" bình thường, sử dụng

BERUFSBILDUNGSZENT
RUM

1 sẽ hoạt động như được cắt bỏ. Sau đó, bạn có thể viết lại từ sử dụng

BERUFSBILDUNGSZENT
RUM

2.

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  border: solid 1px #000;
}

Berufsbildungszentrum

Kiểm tra cũng được cập nhật jsfiddle

Đã trả lời ngày 28 tháng 3 lúc 13:48Mar 28 at 13:48

Makumakumaku

1093 Huy hiệu bạc4 Huy hiệu đồng3 silver badges4 bronze badges

6

Thêm thuộc tính

BERUFSBILDUNGSZENT
RUM

3 vào thẻ HTML của bạn, vì trình duyệt đang quyết định điều này bằng thuật toán được quyết định trên thẻ ngôn ngữ đó.

Hakan Fıstık

15.5K11 Huy hiệu vàng100 Huy hiệu bạc123 Huy hiệu đồng11 gold badges100 silver badges123 bronze badges

Đã trả lời ngày 9 tháng 3 năm 2017 lúc 3:16Mar 9, 2017 at 3:16

Evaylyevaylyevayly

8127 Huy hiệu bạc16 Huy hiệu Đồng7 silver badges16 bronze badges

3

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Thuộc tính

BERUFSBILDUNGSZENT
RUM

4 kiểm soát sự gạch nối của văn bản trong các phần tử cấp khối. Bạn có thể ngăn chặn sự gạch nối xảy ra, cho phép nó hoặc chỉ cho phép nó khi có một số ký tự nhất định.

Lưu ý rằng

BERUFSBILDUNGSZENT
RUM

4 là nhạy cảm với ngôn ngữ. Khả năng tìm kiếm cơ hội phá vỡ của nó phụ thuộc vào ngôn ngữ, được xác định trong thuộc tính

BERUFSBILDUNGSZENT
RUM

0 của yếu tố cha. Không phải tất cả các ngôn ngữ được hỗ trợ và hỗ trợ phụ thuộc vào trình duyệt cụ thể.

Cú pháp

.element {
  hyphens: none | manual | auto
}

BERUFSBILDUNGSZENT
RUM

7

Các từ không bao giờ được gạch nối ở mức phá vỡ dòng, ngay cả khi các ký tự bên trong từ gợi ý nơi gạch nối có thể hoặc nên đi.

BERUFSBILDUNGSZENT
RUM

8

Các từ chỉ bị phá vỡ ở mức phá vỡ dòng trong đó có các ký tự bên trong từ gợi ý cơ hội phá vỡ dòng. Có hai nhân vật gợi ý cơ hội phá vỡ dòng:

• BERUFSBILDUNGSZENT
  RUM
  

  9 (dấu gạch nối): Nhân vật Hard Hard Hard cho thấy cơ hội phá vỡ dòng có thể nhìn thấy. Ngay cả khi dòng không thực sự bị hỏng vào thời điểm đó, dấu gạch nối vẫn được hiển thị. Nghĩa đen là một người khác-

• BERUFSBILDUNGSZENTRUM
  
  .content {
    max-height: 80px;
    width: 200px;
    overflow-x: hidden;
    word-wrap: break-word;
    padding: 10px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-weight: bold;
    font-size: 16px;
    border: solid 1px #000;
  }
  

  0 (nhút nhát): Một dấu gạch nối vô hình, mềm mại. Nhân vật này không được thể hiện rõ ràng; Thay vào đó, nó gợi ý một nơi mà trình duyệt có thể chọn để phá vỡ từ nếu cần thiết. Trong HTML, bạn có thể sử dụng

  BERUFSBILDUNGSZENTRUM
  
  .content {
    max-height: 80px;
    width: 200px;
    overflow-x: hidden;
    word-wrap: break-word;
    padding: 10px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-weight: bold;
    font-size: 16px;
    border: solid 1px #000;
  }
  

  1 để chèn một dấu gạch nối mềm.

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

2

Các từ có thể bị phá vỡ tại các điểm gạch nối thích hợp được xác định bởi các ký tự dấu gạch nối (xem ở trên) bên trong từ hoặc được xác định tự động bằng tài nguyên gạch nối phù hợp với ngôn ngữ (nếu được hỗ trợ bởi trình duyệt hoặc cung cấp qua

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

3).

Các ký tự dấu gạch nối có điều kiện trong một từ, nếu có, ưu tiên hơn các tài nguyên tự động khi xác định các điểm gạch nối trong từ.

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

4

Không dùng nữa, không sử dụng. Đây chỉ là trong thông số kỹ thuật tạm thời để thử nghiệm.. This was only in the spec temporarily for testing.

Thử nghiệm

Bản demo dưới đây có một loạt các đoạn văn và mọi thứ được đặt thành

BERUFSBILDUNGSZENT
RUM

1 để chứng minh khái niệm gạch nối. Thuộc tính

BERUFSBILDUNGSZENT
RUM

0 được đặt thành

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

7 trên phần tử cha.

Hỗ trợ trình duyệt

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Bờ rìa	Cuộc đi săn
88	6*	10*	12*	5.1*

Di động / máy tính bảng

Android chrome	Android Firefox	Android	iOS safari
107	106	107	4.2-4.3*

Safari 5+ yêu cầu

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

8, Firefox 6+ yêu cầu

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

9, tức là 10+ yêu cầu

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

0, iOS 4.2+ yêu cầu

BERUFSBILDUNGSZENTRUM

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

8.

Trình duyệt Chrome <55 và Android thực sự hỗ trợ

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

2, là giá trị mặc định, nhưng không có giá trị nào khác.

Trong Firefox và Internet Explorer, dấu gạch nối tự động chỉ hoạt động cho một số ngôn ngữ (được xác định với thuộc tính ____10). Xem ghi chú này để biết danh sách toàn diện các ngôn ngữ được hỗ trợ.

Nếu bạn đang viết một tài liệu dựa trên web thực sự cần gạch nối, bạn có thể sử dụng Hyphenator.js là thư viện dựa trên từ điển rộng lớn sẽ tự động đưa dấu gạch nối mềm và không gian không có chiều rộng vào nội dung của bạn.

Không có JavaScript, bạn sẽ phải dựa vào cả

BERUFSBILDUNGSZENT
RUM

4 và

.content {
  max-height: 80px;
  width: 200px;
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  border: solid 1px #000;
}

5:

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

Thêm thông tin

• dấu gạch nối trong thông số kỹ thuật
• Hyphens tại MDN
• Từ gói/gạch nối bằng cách sử dụng CSS của Kenneth Auchenberg
• Trạng thái gạch nối hiện tại của người Viking trên web của David Newton