Cách ngăn ngắt dòng ở dấu gạch ngang trên tất cả các trình duyệt

Chúng tôi có một ckeditor trên CMS của mình. Người dùng cuối của chúng tôi sẽ nhập một số bài báo dài qua ckeditor đó. Chúng ta cần một cách để ngăn chặn việc ngắt dòng ở dấu gạch ngang trên các bài báo đó.

Có cách nào để ngăn chặn ngắt dòng ở dấu gạch ngang trên tất cả các trình duyệt không?

hoặc ckeditor có tùy chọn nào để ngăn chặn điều đó không?

Tôi e rằng không có cách nào đơn giản hơn để làm điều đó một cách đáng tin cậy hơn là tách văn bản thành “từ” (chuỗi các ký tự không có khoảng trắng được phân tách bằng khoảng trắng) và gói mỗi “từ” có chứa dấu gạch ngang bên trong nobrđánh dấu. Vì vậy, dữ liệu đầu vào như bla bla foo-bar bla blasẽ được chuyển sang bla bla <nobr>foo-bar</nobr> bla bla.

Bạn thậm chí có thể cân nhắc việc chèn nobrđánh dấu bất cứ khi nào “từ” chứa bất kỳ thứ gì ngoại trừ các chữ cái và chữ số. Lý do là một số trình duyệt thậm chí có thể ngắt các chuỗi như “2/3” hoặc “f (0)” (xem trang của tôi về những điểm kỳ lạ của việc ngắt dòng trong trình duyệt ).

Bạn có thể sử dụng ‑ đây là một HYPHEN KHÔNG ĐỘT PHÁ Unicode (U + 2011).

HTML: ‑hoặc‑

Xem thêm: http://en.wikipedia.org/wiki/Hyphen#In_computing

Một giải pháp có thể là sử dụng một spanthẻ phụ và thuộc tính white-spaceCSS. Chỉ cần xác định một lớp như thế này:

.nowrap {
    white-space: nowrap;
}

Và sau đó thêm một khoảng với lớp đó xung quanh văn bản được gạch nối của bạn.

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

Cách tiếp cận này sẽ hoạt động tốt trên tất cả các trình duyệt - các triển khai lỗi được liệt kê ở đây dành cho các giá trị khác của thuộc white-spacetính: http://reference.sitepoint.com/css/white-space#compatibilitysection

Bạn không thể làm điều đó nếu không chỉnh sửa mọi phiên bản HTML. Do đó, tôi đã viết một số JS để thay thế chúng:

jQuery:

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

Vanilla JS:

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

Sử dụng ký tự nối từ ( ⁠) xung quanh dấu gạch nối. Nó cũng hoạt động trong IE.

https://en.wikipedia.org/wiki/Word_joiner

sửa các dấu gạch nối cụ thể ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

hoặc mọi thứ ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

Hãy thử CSS này:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;