Chúng tôi có một ckeditor trên CMS của chúng tôi. Người dùng cuối của chúng tôi sẽ nhập một số bài viết dài qua ckeditor đó. Chúng tôi cần một cách để ngăn chặn ngắt dòng tại dấu gạch nối trên các bài viết đó.
Có cách nào để ngăn chặn ngắt dòng tại dấu gạch nối trên tất cả các trình duyệt không?
hoặc không ckeditor có một tùy chọn để ngăn chặn điều đó?
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 ký tự không khoảng trắng được phân tách bằng khoảng trắng) và bao quanh mỗi từ có chứa dấu gạch nối bên trong nobr đánh dấu. Vì vậy, dữ liệu đầu vào như bla bla foo-bar bla bla sẽ đượ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 cứ thứ gì trừ chữ cái và chữ số. Lý do là một số trình duyệt thậm chí có thể phá vỡ các chuỗi như “2/3” hoặc “f (0)” (xem trang của tôi trên sự kỳ quặc của việc ngắt dòng trong các trình duyệt).
Bạn có thể dùng ‑ đây là một HYPHEN KHÔNG NỔI BẬT Unicode (U + 2011).
HTML: ‑ hoặc là ‑
Một giải pháp có thể là sử dụng thêm span thẻ và white-space Thuộc tính CSS. Chỉ cần định nghĩa 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 trong tất cả các trình duyệt - các triển khai lỗi được liệt kê ở đây là dành cho các giá trị khác của white-space bất động sản: http://reference.sitepoint.com/css/white-space#compatibilitysection
Bạn không thể làm điều đó mà không cần chỉnh sửa từng 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;
}
thử cái này
word-break: break-all; -webkit-hyphens:none;-moz-hyphens: none; hyphens: none;