Câu hỏi Cách 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


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 đó?


75
2018-01-06 04:15


gốc




Các câu trả lời:


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).


41
2018-01-06 08:12



Các nobr thẻ không phải là tiêu chuẩn và được W3C khuyến khích mạnh mẽ. Xem w3.org/TR/html5/obsolete.html#non-conforming-features - derekerdmann
Không giống như bất kỳ cách tiếp cận nào khác, nobr đánh dấu hoạt động trên tất cả các trình duyệt, hoạt động ngay cả khi bảng định kiểu bị tắt và hoạt động độc lập với hỗ trợ cho các ký tự đặc biệt. Có cái nào không thực vấn đề với nó? - Jukka K. Korpela
Tại sao không <span style = "white-space: nowrap"> </ span>? - Brendan Byrd
@ JukkaK.Korpela vấn đề với nó là các trình duyệt hiện đại có thể quyết định thả hỗ trợ cho nó, và có thể làm như vậy mà không vi phạm đặc tả HTML. Đó là một tính năng "nên", mà chỉ đơn thuần là một điều được đề xuất để thực hiện. Liên quan đến bảng định kiểu, nếu người dùng đã vô hiệu hóa các trang định kiểu, thì họ sẽ không có bất kỳ kiểu nào - mirhagk
Tôi đã phát triển các trang web trong 10 năm và thậm chí không biết bạn CÓ THỂ vô hiệu hóa các bảng định kiểu trong trình duyệt của bạn. Ai thực sự thực sự (ngoài những người tương tự sẽ chọn tự bỏ cấm tự JavaScript theo mặc định trong ngày và tuổi này)? Nếu chúng ta cần phải là như vậy, thì đâu là giải pháp thay thế? - John Rix


Bạn có thể dùng   đây là một HYPHEN KHÔNG NỔI BẬT Unicode (U + 2011).

HTML: &#x2011; hoặc là &#8209;

Cũng thấy: http://en.wikipedia.org/wiki/Hyphen#In_computing


201
2018-01-06 04:18



Cảm ơn rất nhiều vì trả lời của bạn. Nhưng điều chúng ta cần làm là ngăn chặn ngắt dòng trên ckeditor, nơi tất cả nội dung sẽ được người dùng cuối nhập vào. chúng tôi không thể yêu cầu mọi người nhập dấu gạch nối không phá vỡ unicode. Có cách nào khác để ngăn chặn ngắt dòng không? hoặc không ckeditor có một tùy chọn để chuyển đổi dấu nối tự động? Cảm ơn một lần nữa - Alan
Bạn có thể thay thế chuỗi đơn giản, thay thế - với ‑. - deceze♦
Cẩn thận với hỗ trợ font chữ giới hạn cho U + 2011, xem fileformat.info/info/unicode/char/2011/fontsupport.htm - Jukka K. Korpela
Trong khi điều này chắc chắn là thanh lịch hơn trong lý thuyết thì trát vữa nobr các thẻ trên khắp nơi, nó không hoạt động tốt trong thực tế. IE hiển thị nó như là một dấu gạch ngang, Safari cho biết thêm không gian xung quanh nó hơn một dấu gạch ngang bình thường, và hầu hết các trình soạn thảo văn bản hiển thị nó như một dấu hỏi hoặc hộp hoặc các ký tự vô nghĩa khác. - Tgr
@jakev Tôi sẽ đi với white-space: nowrap theo đề xuất của derekerdmann. Btw trên FF / Win7 dấu gạch ngang nhút nhát dường như được chuyển đổi thành một dấu gạch ngang thông thường khi sao chép và dán bên ngoài Firefox, ngay cả khi ứng dụng đích là nhận thức Unicode. - Tgr


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


64
2018-01-06 04:24



Cảm ơn rất nhiều vì trả lời của bạn. Nhưng nội dung văn bản của chúng tôi sẽ được người dùng cuối nhập vào thông qua một ckeditor. chúng tôi không thể yêu cầu mọi người thêm <span> xung quanh từ. Có cách nào khác để đạt được nó? Dù sao cũng cảm ơn bạn - Alan
@Alan - Loại nội dung nào họ thêm vào không thể phá vỡ ở mức tăng? Nếu đó là tiêu đề hoặc một số yếu tố khác sẽ luôn nằm trên một dòng, sau đó áp dụng white-space: nowrap cho toàn bộ thùng chứa. Nếu không, cứ để nó đi; đầu tiên, không có lý do gì để ngăn chặn ngắt dòng bằng dấu gạch ngang cho nội dung chung và thứ hai, không có cách nào bạn có thể nhận được những gì bạn đang tìm kiếm xảy ra tự động trừ khi bạn sẵn sàng hack tại CKEditor. - derekerdmann
Có rất nhiều tình huống khi ngắt dòng sau dấu gạch ngang là xấu hoặc chỉ rất sai, như trong “F-1” hoặc khi dấu gạch ngang được sử dụng là trừ đơn, như trong “-42 °” (và mọi người sử dụng theo cách đó, vì họ không biết về dấu trừ). - Jukka K. Korpela
Điều này làm việc, nhưng thực tế là nó hoạt động là không trực quan, bởi vì dấu gạch nối không phải là khoảng trắng. <nobr> là rõ ràng hơn nhiều. - Dave Burton


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;
}

1
2018-04-25 19:47



Tôi thích ý tưởng ở đây, vì nó không liên quan đến việc chỉnh sửa từng bit HTML có thể chứa dấu nối. Tuy nhiên, tôi nghi ngờ bạn có thể gặp phải các vấn đề về hiệu suất xử lý từng bit văn bản trên toàn bộ trang như thế này, đặc biệt nếu có nhiều yếu tố. - Sean the Bean


thử cái này

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

-1
2018-06-01 10:03



Mặc dù đoạn mã này có thể giải quyết được câu hỏi, bao gồm một lời giải thích thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho người đọc trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn. Ngoài ra, vui lòng không cố gắng gắn mã của bạn với các nhận xét giải thích, điều này làm giảm khả năng đọc của cả mã và giải thích! - Ashish Ahuja
Điều này không hiệu quả chút nào. - sbichenko