Làm cách nào để hiển thị dấu gạch nối trong html?

Dấu gạch ngang em là một dấu chấm câu có thể được sử dụng thay cho dấu phẩy, dấu ngoặc đơn hoặc dấu hai chấm — thường nhằm mục đích cải thiện khả năng đọc

Tạo một Em Dash

Để tạo dấu gạch ngang trong HTML, hãy sử dụng thực thể HTML thích hợp. Nhập số thực thể hoặc tên thực thể mà bạn muốn dấu gạch ngang em xuất hiện

Số thực thể HTML

Đây là cách bạn sử dụng số thực thể HTML để hiển thị dấu gạch ngang em

Mã nguồnKết quả—

Tên thực thể HTML

Ví dụ này sử dụng tên thực thể để hiển thị dấu gạch ngang em

Mã nguồnKết quả—

Ví dụ sử dụng

Đây là một ví dụ về việc sử dụng dấu gạch ngang em trong một câu

Mã nguồnKết quả

Sau khi đến thư viện—để đọc về cách tâm trí ảnh hưởng đến vật chất—tôi tiếp tục đến phòng tập thể dục và lập kỷ lục thế giới mới về động tác gập bụng

Em Dash vs En Dash

Đối với những người chưa qua đào tạo, dấu gạch ngang có thể dễ dàng bị nhầm với dấu gạch ngang hoặc thậm chí là dấu gạch ngang. Điều này là do sự khác biệt duy nhất (trực quan) giữa ba ký tự đó là chiều rộng của chúng. Em dash là rộng nhất. Dấu gạch ngang en hơi hẹp hơn dấu gạch ngang em và dấu gạch ngang lại hẹp hơn một chút

Cả ba đều có mục đích khác nhau, vì vậy hãy đảm bảo sử dụng đúng ký tự cho mục đích dự định của bạn

---

Các ký tự dành riêng trong HTML phải được thay thế bằng các thực thể ký tự

---

Một số ký tự được dành riêng trong HTML

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Các thực thể ký tự được sử dụng để hiển thị các ký tự dành riêng trong HTML

Một thực thể nhân vật trông như thế này

&entity_name;

HOẶC LÀ

&#entity_number;

Để hiển thị dấu nhỏ hơn (<), chúng ta phải viết. < hoặc <

Lợi ích của việc sử dụng tên thực thể. Tên thực thể dễ nhớ
Nhược điểm của việc sử dụng tên thực thể. Các trình duyệt có thể không hỗ trợ tất cả các tên thực thể, nhưng hỗ trợ tốt cho các số thực thể

---

Không gian không phá vỡ

Một thực thể thường được sử dụng trong HTML là không gian không phá vỡ.  

Khoảng trắng không ngắt là khoảng trắng sẽ không ngắt thành một dòng mới

Hai từ cách nhau bởi dấu cách không ngắt sẽ dính vào nhau (không ngắt thành dòng mới). Điều này rất hữu ích khi ngắt các từ có thể gây rối

ví dụ

Một cách sử dụng phổ biến khác của khoảng trống không phá vỡ là để ngăn trình duyệt cắt bớt khoảng trắng trong các trang HTML

Nếu bạn viết 10 khoảng trắng trong văn bản của mình, trình duyệt sẽ xóa 9 khoảng trắng trong số đó. Để thêm khoảng trắng thực vào văn bản của mình, bạn có thể sử dụng thực thể ký tự

Mẹo. Dấu gạch ngang không ngắt (‑) được sử dụng để xác định ký tự gạch nối (‑) không ngắt thành một dòng mới

---

---

Một số thực thể ký tự HTML hữu ích

Ghi chú. Tên thực thể phân biệt chữ hoa chữ thường

---

Kết hợp dấu phụ

Dấu phụ là một "glyph" được thêm vào một chữ cái

Một số dấu phụ, như dấu huyền ( ̀) và dấu sắc ( ́) được gọi là trọng âm

Dấu phụ có thể xuất hiện cả bên trên và bên dưới một chữ cái, bên trong một chữ cái và giữa hai chữ cái

Dấu phụ có thể được sử dụng kết hợp với các ký tự chữ và số để tạo ra một ký tự không có trong bộ ký tự (mã hóa) được sử dụng trong trang

Thuộc tính hyphens xác định liệu dấu gạch nối có được phép tạo nhiều cơ hội ngắt dòng mềm hơn trong một dòng văn bản hay không

Đưa ra bản chạy thử ❯

Giá trị mặc định. hướng dẫn sử dụng được kế thừa. vângCó thể hoạt hình. không. Đọc về animatableVersion. Cú pháp CSS3JavaScript. mục tiêu. Phong cách. dấu gạch nối = "không"

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Dấu gạch nối thuộc tính55. 079. 0
10. 0 -ms-43. 05. 1 -webkit-44. 0

---

---

Cú pháp CSS

gạch nối. không ai. thủ công. Tự động. ban đầu. thừa kế;

Giá trị tài sản

Giá trịMô tảDemononeTừ không được gạch nốiDemo ❯manualDefault. Các từ chỉ được gạch nối ở ‐ hoặc (nếu cần)Bản trình diễn ❯autoCác từ được gạch nối ở nơi thuật toán đang quyết định (nếu cần)Bản trình diễn ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế

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

Lưu ý rằng hyphens nhạy cảm với ngôn ngữ. Khả năng tìm cơ hội phá vỡ của nó phụ thuộc vào ngôn ngữ, được định nghĩa trong thuộc tính lang của phần tử cha. Không phải tất cả các ngôn ngữ đều được hỗ trợ và hỗ trợ tùy thuộc vào trình duyệt cụ thể

cú pháp

.element {
  hyphens: none | manual | auto
}

hyphens: none

Các từ không bao giờ được gạch nối khi ngắt 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.

hyphens: manual

Các từ chỉ bị ngắt khi ngắt dòng khi có các ký tự bên trong từ gợi ý cơ hội ngắt dòng. Có hai ký tự gợi ý cơ hội ngắt dòng

• U+2010 (DÂY CHUYỀN). ký tự gạch nối "cứng" biểu thị cơ hội ngắt dòng có thể nhìn thấy. Ngay cả khi dòng không thực sự bị hỏng tại thời điểm đó, dấu gạch nối vẫn được hiển thị. Nghĩa đen là một "-"
• U+00AD (XẤU HỔ). một gạch nối vô hình, "mềm". Ký tự này không được hiển thị rõ ràng; . Trong HTML, bạn có thể sử dụng ­ để chèn dấu gạch nối mềm

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

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

0

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

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

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

1)

Các ký tự gạch nối có điều kiện bên trong một từ, nếu có, sẽ đượ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ừ đó

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

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

2

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

Thử nghiệm

Bản trình diễn bên dưới có một loạt các đoạn văn và mọi thứ được đặt thành

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

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

3 để thể hiện khái niệm gạch nối. Thuộc tính lang được đặt thành

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

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

5 trên phần tử cha

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari886*10*12*5.1*

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

Android ChromeAndroid FirefoxAndroidiOS Safari109< . 2-4. 3*1091094.2-4.3*

Safari 5+ yêu cầu

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

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

6, Firefox 6+ yêu cầu

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

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

7, IE 10+ yêu cầu

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

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

8, iOS 4. 2+ yêu cầu

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

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

6

Trình duyệt Chrome < 55 và Android thực sự hỗ trợ hyphens0, đây là giá trị mặc định, ngoài ra không có giá trị nào khác

Trong Firefox và Internet Explorer, tính năng gạch nối tự động chỉ hoạt động đối với một số ngôn ngữ (được xác định bằng thuộc tính lang). Xem danh sách đầy đủ 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 Dấu gạch nối. js là một thư viện dựa trên một từ điển rộng lớn sẽ tự động chèn các dấu gạch nối mềm và khoảng trắng có độ rộng bằng 0 vào nội dung của bạn

Mã HTML cho dấu gạch nối là gì?

Mã ký tự cho dấu gạch nối là gì?