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à ‑
Cũng thấy: http://en.wikipedia.org/wiki/Hyphen#In_computing
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;