Mamy ckeditor w naszym CMS. Nasi użytkownicy końcowi będą wprowadzać długie artykuły za pośrednictwem tego ckeditor. Potrzebujemy sposobu, aby zapobiec łamaniu linii w łącznikach w tych artykułach.
Czy w ogóle istnieje możliwość zapobiegania łamaniu linii w łącznikach we wszystkich przeglądarkach?
czy ckeditor ma opcję, aby temu zapobiec?
Odpowiedzi:
Obawiam się, że nie ma prostszego sposobu na zrobienie tego niezawodnie niż podzielenie tekstu na „słowa” (sekwencje znaków niebędących białymi znakami oddzielone spacjami) i zawijanie każdego „słowa”, które zawiera łącznik wewnątrz nobrznacznika. Więc dane wejściowe, takie jak bla bla foo-bar bla blazostałyby zwrócone bla bla <nobr>foo-bar</nobr> bla bla.
Możesz nawet rozważyć wstawienie nobrznaczników, ilekroć „słowo” zawiera wszystko oprócz liter i cyfr. Powodem jest to, że niektóre przeglądarki mogą nawet łamać ciągi znaków, takie jak „2/3” lub „f (0)” (zobacz moją stronę dotyczącą dziwnych przypadków łamania linii w przeglądarkach ).
nobrTag nie jest standardem, i zdecydowanie odradzane przez W3C. Zobacz w3.org/TR/html5/obsolete.html#non-conforming-features
nobrznaczniki działają we wszystkich przeglądarkach, działają nawet wtedy, gdy arkusze stylów są wyłączone i działają niezależnie od obsługi znaków specjalnych. Czy jest z tym prawdziwy problem?
Możesz użyć ‑ ŁĄCZNIKA NIEŁAMANIAJĄCEGO Unicode (U + 2011).
HTML: ‑lub‑
Zobacz także: http://en.wikipedia.org/wiki/Hyphen#In_computing
-z ‑.
nobrna całym miejscu, w praktyce nie działa zbyt dobrze. IE wyświetla to jako półpauzę, Safari dodaje więcej miejsca wokół niego niż zwykła myślnik, a większość edytorów tekstu wyświetla go jako znak zapytania, ramkę lub inny bezsensowny znak.
white-space: nowrapzgodnie z sugestią derekerdmanna. Przy okazji na FF / Win7 nieśmiała myślnik wydaje się być konwertowana na zwykłą myślnik podczas kopiowania i wklejania poza Firefox, nawet jeśli aplikacja docelowa obsługuje Unicode.
Jednym z rozwiązań mogłoby być użycie dodatkowego spantagu i white-spacewłaściwości CSS. Po prostu zdefiniuj taką klasę:
.nowrap {
white-space: nowrap;
}A następnie dodaj rozpiętość z tą klasą wokół dzielonego tekstu.
<p>This is the <span class="nowrap">anti-inflammable</span> model</p>To podejście powinno działać dobrze we wszystkich przeglądarkach - wymienione tutaj błędne implementacje dotyczą innych wartości white-spacewłaściwości: http://reference.sitepoint.com/css/white-space#compatibilitysection
white-space: nowrapdo całego kontenera. W przeciwnym razie po prostu odpuść; po pierwsze, nie ma powodu, aby zapobiegać przerywaniu wierszy łącznikami w przypadku ogólnej treści, a po drugie, nie ma możliwości, aby to, czego szukasz, działo się automatycznie, chyba że chcesz zhakować CKEditor.
<nobr>jest znacznie jaśniejszy.
Nie możesz tego zrobić bez edycji każdej instancji HTML. W konsekwencji napisałem trochę JS, aby je zastąpić:
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;
}Użyj znaku łącznika słowa ( ⁠) wokół łącznika. Działa również w IE.
https://en.wikipedia.org/wiki/Word_joiner
popraw określone łączniki ...
function fixicecream(text) {
return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}albo wszystko ...
function fixhyphens(text) {
return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}Wypróbuj ten CSS:
word-break: break-all;
-webkit-hyphens:none;
-moz-hyphens: none;
hyphens: none;