Hướng dẫn css line break after specific character - ngắt dòng css sau ký tự cụ thể

Thật không may, hiện tại không có cách nào trong CSS để điều chỉnh các quy tắc phá vỡ dòng bằng cách chỉ định, ví dụ, việc phá vỡ dòng được cho phép sau một ký tự nhất định ở bất cứ nơi nào nó xuất hiện trong văn bản. Các cài đặt như vậy cũng sẽ nằm trong phạm vi của CSS, nhưng không có định nghĩa hoặc dự thảo công khai nào sẽ giải quyết các vấn đề như vậy.

Cơ hội phá vỡ dòng có thể được chỉ định theo những cách khác nhau, nhưng tất cả chúng hiện đang yêu cầu sửa đổi văn bản hoặc đánh dấu. Các phương thức cơ bản là không gian chiều rộng của ký tự điều khiển (U+200b), là ký tự Unicode tiêu chuẩn và thẻ , là thẻ HTML không đạt tiêu chuẩn nhưng được hỗ trợ rộng rãi. Cả hai đều chỉ ra một cơ hội phá vỡ dòng. Có một chút khó khăn để lựa chọn giữa họ, vì vấn đề phá vỡ dòng trên các trang HTML là khó khăn. Trong thực tế, U+200B hoạt động tốt nếu chúng ta có thể bỏ qua IE 6, như chúng ta chủ yếu có thể trong những ngày này.

Tốt hơn là, các ký tự U+200B (hoặc thẻ ) nên được chèn vào phía máy chủ, nhưng chúng có thể được thêm vào với mã phía máy khách. Như bạn đang nói rằng trang sử dụng jQuery, sau đây sẽ xử lý vấn đề, khi được chèn vào mã khởi tạo để được thực thi khi tải trang:

$('.product-name a').html(function(index, html){
  return html.replace(/&/g, '&\u200B');
});

Ở đây tôi ngây thơ cho rằng các yếu tố liên quan là a các yếu tố được lồng bên trong một yếu tố trong lớp product-name, như trong ví dụ. Điều chỉnh bộ chọn .product-name a khi cần thiết nếu tình huống phức tạp hơn. Mã này chỉ đơn giản là chèn U+200B sau mỗi lần xuất hiện của một ampersand và & và trong nội dung. Tôi giả sử rằng phá vỡ sau một ampers và khi cần là hành vi mong muốn; Nếu bạn muốn phá vỡ trước nó, chỉ cần thay đổi '&\u200B' thành

p {
  word-break: break-all;
}

0.

Đội câu trả lời giáo dục

Một sự phá vỡ dòng có thể được thêm vào trong HTML, chỉ sử dụng CSS, bằng cách sử dụng lớp giả

p {
  word-break: break-all;
}

1 hoặc

p {
  word-break: break-all;
}

2. Trong bảng kiểu, chúng tôi sử dụng các lớp giả này, với lớp HTML hoặc ID, trước hoặc sau nơi chúng tôi muốn chèn một dòng phá vỡ.class or id, before or after the place where we want to insert a line-break.

Trong

p {
  word-break: break-all;
}

3:

1. Đặt thuộc tính

   p {
     word-break: break-all;
   }

   4 thành

   p {
     word-break: break-all;
   }

   5 (ký tự dòng mới).
2. Đặt thuộc tính

   p {
     word-break: break-all;
   }

   6 thành

   p {
     word-break: break-all;
   }

   7. Bằng cách này, trình duyệt sẽ đọc mọi không gian trắng, trong

   p {
     word-break: break-all;
   }

   8, như một không gian trắng.

Ví dụ

1. HTML mà không cần một dòng phá vỡ:

2. Sử dụng

p {
  word-break: break-all;
}

1 để chèn một dòng phá vỡ:

3. Sử dụng

p {
  word-break: break-all;
}

2 để chèn một dòng phá vỡ:

Giả sử bạn có một từ thực sự dài trong một số văn bản bên trong một yếu tố không đủ rộng để giữ nó. Một nguyên nhân phổ biến của điều đó là một url dài tìm thấy nó cách vào bản sao. Điều gì xảy ra? Nó phụ thuộc vào CSS. Làm thế nào mà CSS đang kiểm soát bố cục và những gì CSS đang nói với văn bản.

Đây là những gì một tình huống văn bản đột phá có thể như thế nào:

Văn bản treo ra khỏi hộp là một vấn đề trực quan.

Một khả năng là

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

1, một chút vũ khí lực cùn sẽ ngăn văn bản (hoặc bất cứ thứ gì khác) đi chơi. Tuy nhiên, nó làm cho văn bản không thể truy cập được một chút. Trong một số trình duyệt máy tính để bàn với chuột, bạn có thể nhấp ba lần để chọn URL và sao chép nó, nhưng bạn có thể tin tưởng vào mọi người biết rằng hoặc nó có thể trong tất cả các kịch bản.

Overflow là từ đúng ở đây, vì đó chính xác là những gì đang xảy ra. Chúng tôi cũng có

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

2 theo ý của chúng tôi, điều này sẽ kích hoạt một thanh cuộn ngang. Đôi khi có thể phù hợp, nhưng tôi tưởng tượng tất cả chúng ta đều đồng ý rằng, nói chung, không phải là một giải pháp chấp nhận được.

Những gì chúng tôi muốn là URL dài (hoặc văn bản dưới bất kỳ hình thức nào) để phá vỡ dòng tiếp theo. Có các lựa chọn! Hãy để bắt đầu với một nơi để cố gắng tìm ra thứ này.

Sân chơi thử nghiệm

Ý tưởng của tôi ở đây là có một bảng nội dung có thể thay thế được kết hợp với nhiều thuộc tính/giá trị CSS mà bạn có thể bật và tắt để xem các hiệu ứng trên nội dung.

Đây là toàn diện hoặc thực hiện hoàn hảo, tôi chắc chắn. Nó chỉ là một số tài sản mà tôi nhận thức được.

Cái búa tạ: p { word-wrap: break-word; /* old name */ overflow-wrap: break-word; }3

Cho phép các từ bị phá vỡ ở bất cứ đâu. Tài sản

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

4 không giải quyết vấn đề:

p {
  word-break: break-all;
}

Trong một cuộc trao đổi email với Fantasi, cô đã giải thích rằng điều này hoạt động bởi vì thuộc tính phá vỡ từ xác định lại một từ là gì. Giá trị

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

5 về cơ bản coi không phải CJK là CJK, có thể phá vỡ bất cứ nơi nào (ngoại trừ những thứ như thời kỳ và dấu ngoặc đơn gần). Giá trị

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

6 thực hiện ngược lại, coi CJK là không CJK.

Một bản sửa lỗi tinh tế: `Overflow-wrap: break-word;`

Tài sản

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

7 dường như là giải pháp hiệu quả nhất cho các vấn đề mà chúng tôi đã đặt ra:

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

Thoạt nhìn, nó có thể trông rất giống với bản demo

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

3 ở trên, nhưng hãy chú ý làm thế nào trong URL thay vì phá vỡ Pen Pen, tại PE PE \ N, nó bị phá vỡ ở cuối từ đó. Tốt hơn.

Fantasai giải thích:

Nếu một từ có thể phá vỡ và do đó sẽ tràn ra, thì nó có thể phá vỡ bất cứ nơi nào để tránh tràn.

Một bản sửa lỗi nặng hơn, đôi khi: p { word-wrap: break-word; /* old name */ overflow-wrap: break-word; }9

Khách sạn

p {
  hyphens: auto;
}

0 thực hiện những gì bạn có thể mong đợi, cho phép dấu gạch chéo trong các lần phá vỡ. Hyphens đôi khi có thể thực hiện thủ thuật trong URL và từ dài, nhưng nó không được đảm bảo. Một số dài sẽ vấp nó, ví dụ. Thêm vào đó, dấu gạch nối ảnh hưởng đến tất cả các văn bản, phá vỡ các từ tự do hơn để giúp văn bản ôm nhau đều đúng.

p {
  hyphens: auto;
}

Fantasai đã nói với tôi:

Nếu một từ ’từ đứng kết thúc của dòng, chúng ta có thể gạch nối nó.

Tôi đoán từ Word Word giúp đặt một ngón tay vào vấn đề ở đó. Một số chuỗi dài có vấn đề có vấn đề về các từ, vì vậy, nó có thể được tính vào để giải quyết tất cả các vấn đề tràn.

Búa tạ trong tương lai: p { hyphens: auto; }1

Có một tài sản gọi là

p {
  hyphens: auto;
}

2. Rõ ràng, nó chủ yếu cho dấu câu, nhưng tôi dường như có thể thấy nó hoạt động trong bất kỳ trình duyệt nào. Fantasai nói với tôi rằng sẽ có một giá trị mới gọi là

p {
  hyphens: auto;
}

3 đó là:

Giống như

p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

3 ngoại trừ nó thực sự phá vỡ mọi thứ giống như một máy khách đầu cuối câm.

Những thứ HTML khác

• Phần tử

  p {
    hyphens: auto;
  }

  5 sẽ phá vỡ một dòng bất cứ nơi nào nó hiển thị. Trừ khi nó

  p {
    hyphens: auto;
  }

  6!
• Yếu tố là một cơ hội phá vỡ từ ngữ của người Viking có nghĩa là một từ dài thường gây ra vấn đề tràn khó chịu có thể được nói rằng nó OK OK để phá vỡ tại một điểm nhất định. Hữu ích! Nó hoạt động như một không gian không có chiều rộng.

Công cụ CSS khác

• Ký tự

  p {
    hyphens: auto;
  }

  8 giống như yếu tố.
• Bạn có thể tiêm một dòng phá vỡ thông qua phần tử giả như

  p {
    hyphens: auto;
  }

  9 miễn là phần tử không phải là nội tuyến (hoặc nếu có, nó cần 0)

Làm cách nào để buộc một dòng phá vỡ trong CSS?

Làm thế nào để bạn chia một nhân vật trong CSS?

Làm thế nào để bạn chia một từ sau không gian trong CSS?

Làm cách nào để bắt đầu một dòng mới trong CSS?