Cách thay đổi gói văn bản mặc định bằng HTML và CSS
Không giống như giấy, các trang web có thể gần như vô tận kéo dài sang một bên. Thật ấn tượng, đó không phải là thứ chúng ta thực sự cần trong khi đọc. Trình duyệt bọc văn bản tùy thuộc vào chiều rộng của thùng chứa văn bản và chiều rộng của màn hình để chúng ta có thể nhìn thấy tất cả các văn bản mà không phải cuộn nhiều bên (chỉ xuống dưới).
Gói là một cái gì đó trình duyệt xem xét nhiều yếu tố, chẳng hạn như ngôn ngữ của văn bản hoặc vị trí của dấu câu và dấu cách - chúng đừng đẩy xuống những gì không phù hợp trong hộp được xác định cho nội dung văn bản.
Ngoài gói, trình duyệt cũng chăm sóc không gian; họ hợp nhất nhiều không gian liên tiếp trong mã nguồn thành một không gian duy nhất trên trang được hiển thị và họ cũng đăng ký ngắt dòng bắt buộc trước khi bắt đầu làm việc trên gói.
Khi nào cần thay đổi gói văn bản mặc định
Đó là tất cả tuyệt vời, và nhiều đánh giá cao. Nhưng, chúng ta có thể dễ dàng kết thúc trong trường hợp hành vi trình duyệt mặc định không phải là thứ chúng ta đang tìm kiếm. Nó có thể là một tiêu đề không nên quấn hoặc một từ trong đoạn văn tốt hơn là bị phá vỡ, để lại một khoảng trống trông kỳ lạ ở cuối dòng.
Nó cũng có thể xảy ra rằng chúng ta chỉ tuyệt vọng cần những không gian được bảo tồn trong văn bản của chúng tôi, tuy nhiên trình duyệt tiếp tục kết hợp chúng thành một, buộc chúng ta phải thêm nhiều trong mã nguồn.
Tùy chọn gói cũng có thể thay đổi với ngôn ngữ và mục đích của văn bản. Một bài báo tiếng Quan thoại và một bài thơ tiếng Pháp không nhất thiết phải được gói theo cùng một cách chính xác.
Có một số lượng lớn các thuộc tính CSS (và các yếu tố HTML!) Có thể kiểm soát gói và các điểm dừng và cũng xác định cách xử lý khoảng trắng và ngắt dòng trước khi gói.
Cơ hội bọc mềm & phá vỡ bọc mềm
Trình duyệt quyết định nơi để bọc một văn bản tràn tùy thuộc vào ranh giới từ, dấu gạch nối, âm tiết, dấu chấm câu, dấu cách và nhiều hơn nữa. Những nơi này được gọi là cơ hội bọc mềm và khi trình duyệt phá vỡ văn bản tại một nơi như vậy, ngắt được gọi là phá vỡ bọc mềm.
Cách đơn giản nhất để buộc nghỉ thêm có thể được thực hiện bằng cách sử dụng tốt cũ
Khoảng trắng
Nếu bạn quen thuộc với khoảng trắng Thuộc tính CSS Tôi cá rằng bạn đã đến để biết nó theo cách tương tự như nhiều người khác; trong khi tìm kiếm một cách để ngăn chặn việc gói văn bản. Các bây giờ giá trị của khoảng trắng làm chính xác điều đó.
Tuy nhiên, khoảng trắng tài sản là về nhiều hơn chỉ là gói. Trước hết, khoảng trắng là gì? nó là một bộ ký tự không gian. Mỗi không gian trong bộ khác nhau về chiều dài, hướng hoặc cả hai.
Một điển hình nhân vật không gian ngang duy nhất là những gì chúng tôi thêm bằng cách nhấn phím phím cách. Phím tab cũng thêm một không gian tương tự nhưng có chiều dài lớn hơn. Phím Enter thêm một không gian dọc để bắt đầu một dòng mới, và trong HTML thêm một không gian duy nhất không thể phá vỡ đến các trang web. Như thế này, có rất nhiều loại không gian tạo thành “khoảng trắng”.
Như tôi đã đề cập ở phần đầu, trình duyệt sụp đổ nhiều không gian (cả ngang và dọc) trong nguồn vào một không gian duy nhất. Họ cũng xem xét các nhân vật không gian cho cơ hội gói (những nơi mà một văn bản có thể được bọc) khi cần bọc.
Và, chính xác đó là những hành động trình duyệt mà chúng ta có thể kiểm soát khoảng trắng. Lưu ý rằng khoảng trắng tài sản không ảnh hưởng đến tất cả các loại không gian, chỉ là những người thường xuyên nhất chẳng hạn như không gian đơn ngang thông thường, không gian tab và nguồn cấp dữ liệu.
Dưới đây, bạn có thể thấy một ảnh chụp màn hình của một văn bản mẫu đó là được bao bọc bởi trình duyệt để vừa trong thùng chứa của nó. Việc tràn xảy ra ở dưới cùng của container và văn bản tràn được tô màu khác nhau. Bạn sẽ chú ý sụp đổ của không gian liên tiếp trong mã.
â ?? Xin chào. â ?? Xin chào. â ?? Xin chào¢Â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? xin chào.
.textContainer width: 500px; chiều cao: 320px;
Sau khi áp dụng khoảng trắng: nowrap; quy tắc, gói văn bản thay đổi theo cách sau:
.textContainer / * Nhìn * / trắng-space: nowrap;
Các trước giá trị của khoảng trắng bảo tồn tất cả các khoảng trắng và ngăn chặn sự bao bọc của văn bản:
.textContainer / * Nhìn * / trắng-space: pre;
Các bọc trước giá trị của khoảng trắng bảo tồn tất cả các khoảng trắng và kết thúc văn bản:
.textContainer / * Nhìn * / trắng-space: pre-quấn;
cuối cùng tiền tuyến giá trị của khoảng trắng bảo tồn các khoảng trắng dọc chẳng hạn như dòng mới và kết thúc văn bản:
.textContainer / * Nhìn * / trắng-space: tiền tuyến;
Từ vỡ
Một thuộc tính CSS quan trọng khác mà bạn nên biết để kiểm soát việc bọc văn bản là ngắt từ. Bạn có thể thấy trong tất cả các ảnh chụp màn hình ở trên mà trình duyệt bọc văn bản trước từ “xin chào” ở phía bên phải, ngoài đó văn bản tràn. Trình duyệt không phá vỡ từ.
Tuy nhiên, nếu bạn phải cho phép phá vỡ các chữ cái trong một từ để văn bản sẽ nhìn ngay cả ở bên phải bạn cần sử dụng phá vỡ tất cả giá trị cho ngắt từ bất động sản:
.textContainer / * Hoài * / word-break: break-all;
Các ngắt từ tài sản có giá trị thứ ba bên cạnh phá vỡ tất cả và bình thường (thuộc về ngắt dòng mặc định). Các giữ tất cả giá trị không cho phép ngắt lời.
Bạn có thể không thấy tác dụng của giữ tất cả bằng tiếng Anh. Nhưng, trong các ngôn ngữ mà các chữ cái trong một từ là đơn vị có ý nghĩa, trình duyệt có thể ngắt các từ khi gói và điều này có thể được ngăn chặn bằng cách sử dụng giữ tất cả.
Chẳng hạn, chữ cái trong tiếng Hàn, ban đầu bị hỏng để gói, được giữ lại với nhau khi mà không gian trắng: giữ tất cả; quy tắc được chỉ định.
ì ??¸ÃªÂ³Â ??¥Â¼ Ã-Â-Â¥Ã- ?? à «Â ??  ?? Ã- ??  ??, ì ??  «Â ??  ??¬Â½Â ?? à «Â ??  ??¡Â ?? Ã- ??  ??¬Â ??¬Â ??  ??¬Â ??¤. ì ?? 10Ã- ??  ?? ì ??  «Â ??  ??¬Â½Â ?? à «Â ??  ?? êµÂn¬Â ?? Ã- ??  ??¬Â ??  ??ªÂ °  ?? 1997à «Â   ?? 3ì ?? 10ì ??¼Ã «¶Â ?? Ã- ??  ° 12ì ??¼ÃªÂ¹Â ??¬Â§Â ?? à «Â ?? ¬ ??¼Ã¬Â ?? à «§Â ??¬Â ??¸Ã¬Â¦Â ??¬Â- ??¬Â ?? ìÂ-´à «¦Â½Ã «Â ??  ??¤. 짠??ªÂ¸Â ?? à «Â ??  ± ë ¡ ?? Ã- ??  ??¬Â ??¬Â ??  ??¬Â ??¤. ì ??´ Ã- ??  ??¬Â ??  ??¬Â- ??¬Â ??  ?? à «Â ??  ?? ìÂ- ê³ ?? ìÂn? à «Â °  ??¬Â ?? ìÂn ??¬Â¸ÃªÂ °  ?? à «Â ??¤Ã¬Â ??´ Ã- ??¨ÃªÂ »Â ?? à «ªÂ¨Ã¬Â-¬ à «Â ??¤Ã¬Â ??  ??ªÂ³Â¼ ê °  ??¬Â ?? à «¶Â ??¬Â ??¼Ã «¥Â¼ à «Â ??¤Ã «Â £ ¹à «Â ??  ??¤.
.textContainer / * Nhìn * / word-break: keep-all;
Khách sạn này có thể hỗ trợ một giá trị khác được gọi là ngắt lời trong tương lai. Bạn sẽ thấy như thế nào ngắt lời hoạt động sau, trong “Tràn bọc” phần của bài viết này.
Cơ hội phá vỡ từ
Nhà phát triển cũng có thể thêm cơ hội bọc trong từ, sử dụng
â ?? Xin chào. â ?? Xin chào. â ?? Hyêu tinh¢Â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? Xin chào. â ?? xin chào.
.textContainer / * Nhìn * / trắng-space: pre-quấn;
Không có
Hyphens
Các dấu gạch ngang Thuộc tính CSS là một cách khác để kiểm soát ngắt giữa các chữ cái trong một từ. Chúng tôi có một bài viết riêng về gạch nối CSS nếu bạn quan tâm. Nói tóm lại, tài sản cho phép bạn tạo cơ hội bao bọc thông qua gạch nối.
Nó là Tự động giá trị nhắc trình duyệt tự động gạch nối và ngắt từ khi cần thiết Trong khi gói. Các hướng dẫn sử dụng giá trị buộc các trình duyệt phải bọc (nếu cần) tại các cơ hội gạch nối được thêm bởi chúng tôi, chẳng hạn như ký tự gạch nối (‐) hoặc là (gạch nối mềm). Nếu không ai đã được đưa ra như là giá trị sẽ có không có gói được thực hiện gần dấu gạch nối.
bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse
.textContainer / * Hoài * / -webkit-hyphens: auto; -ms-hyphens: tự động; dấu gạch ngang: tự động;
Tràn bọc
Các bọc tràn Điều khiển thuộc tính CSS nếu a trình duyệt có thể ngắt từ (hoặc không gian được bảo tồn, hỗ trợ có thể xảy ra trong tương lai gần) trên tràn. Khi mà ngắt lời giá trị được đưa ra cho bọc tràn, từ sẽ bị phá vỡ trong trường hợp không có cơ hội bọc mềm khác được tìm thấy trong dòng.
Lưu ý rằng bọc tràn còn được gọi là gói từ (chúng là bí danh).
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
.textContainer / * Nhìn * / overflow-quấn: break-word;
Không có khoảng trắng ở giữa các chữ cái trong mã HTML ở trên (nghĩa là không có cơ hội gói), văn bản ban đầu không được bao bọc và được bảo tồn như một từ duy nhất.
Tuy nhiên, khi được phép bao bọc văn bản bằng cách ngắt từ (nghĩa là ngắt lời giá trị đã được trao cho bọc tràn), các gói xảy ra bằng cách phá vỡ toàn bộ chuỗi bất cứ nơi nào cần thiết.
