เรามี ckeditor บน CMS ของเรา ผู้ใช้ของเราจะป้อนบทความยาว ๆ ผ่าน ckeditor นั้น เราต้องการวิธีป้องกันการขึ้นบรรทัดใหม่ที่ขีดกลางของบทความเหล่านั้น
มีการป้องกันการแตกบรรทัดที่ขีดกลางบนเบราว์เซอร์ทั้งหมดหรือไม่
หรือ ckeditor มีทางเลือกในการป้องกันหรือไม่
คำตอบ:
ฉันกลัวว่าจะไม่มีวิธีที่ง่ายกว่านี้ในการทำให้น่าเชื่อถือไปกว่าการแยกข้อความเป็น "คำ" (ลำดับของอักขระที่ไม่ใช่ช่องว่างคั่นด้วยช่องว่าง) และตัด "คำ" แต่ละคำที่มีเครื่องหมายยัติภังค์อยู่ภายในnobrมาร์กอัป ดังนั้นข้อมูลที่ป้อนbla bla foo-bar bla blaจะถูกเปลี่ยนไปbla bla <nobr>foo-bar</nobr> bla blaจะหันไป
คุณอาจพิจารณาแทรกnobrมาร์กอัปเมื่อใดก็ตามที่ "word" ประกอบด้วยตัวอักษรและตัวเลข สาเหตุก็คือเบราว์เซอร์บางตัวอาจทำลายสตริงเช่น“ 2/3” หรือ“ f (0)” (ดูหน้าของฉันเกี่ยวกับความแปลกประหลาดของการแตกบรรทัดในเบราว์เซอร์ )
nobrแท็กไม่ได้มาตรฐานและกำลังใจอย่างมากโดยของ W3C ดูw3.org/TR/html5/obsolete.html#non-conforming-features
nobrมาร์กอัปใช้งานได้บนเบราว์เซอร์ทั้งหมดทำงานได้แม้ในขณะที่สไตล์ชีตถูกปิดใช้งานและทำงานโดยไม่ขึ้นกับการสนับสนุนอักขระพิเศษ มีปัญหาจริงหรือไม่
คุณสามารถใช้ ‑ซึ่งเป็น Unicode NON-BREAKING HYPHEN (U + 2011)
HTML: ‑หรือ‑
ดูเพิ่มเติมที่: http://en.wikipedia.org/wiki/Hyphen#In_computing
-ด้วย‑.
nobrแท็กทั่วทุกที่ แต่ก็ไม่ได้ผลดีนักในทางปฏิบัติ IE แสดงเป็นเครื่องหมายขีดกลาง Safari จะเพิ่มพื้นที่รอบ ๆ มากกว่าเส้นประปกติและโปรแกรมแก้ไขข้อความส่วนใหญ่จะแสดงเป็นเครื่องหมายคำถามหรือกล่องหรืออักขระที่ไม่มีความหมายอื่น ๆ
white-space: nowrapตามคำแนะนำของ derekerdmann Btw บน FF / Win7 เส้นประขี้อายดูเหมือนจะถูกแปลงเป็นเส้นประปกติเมื่อคัดลอกและวางนอก Firefox แม้ว่าแอปพลิเคชันเป้าหมายจะเป็น Unicode-Aware
วิธีแก้ปัญหาหนึ่งคือการใช้spanแท็กพิเศษและwhite-spaceคุณสมบัติ CSS เพียงกำหนดคลาสดังนี้:
.nowrap {
white-space: nowrap;
}จากนั้นเพิ่มช่วงกับคลาสนั้นรอบข้อความยัติภังค์ของคุณ
<p>This is the <span class="nowrap">anti-inflammable</span> model</p>วิธีนี้ควรใช้งานได้ดีในทุกเบราว์เซอร์ - การใช้งานบั๊กกี้ที่ระบุไว้ที่นี่เป็นค่าอื่น ๆ ของwhite-spaceคุณสมบัติ: http://reference.sitepoint.com/css/white-space#compatibilitysection
white-space: nowrapกับคอนเทนเนอร์ทั้งหมด มิฉะนั้นก็ปล่อยมันไป ประการแรกไม่มีเหตุผลที่จะป้องกันการขึ้นบรรทัดใหม่ด้วยยัติภังค์สำหรับเนื้อหาทั่วไปและประการที่สองไม่มีทางที่คุณจะได้รับสิ่งที่คุณต้องการให้เกิดขึ้นโดยอัตโนมัติเว้นแต่คุณจะเต็มใจที่จะแฮ็กที่ CKEditor
<nobr>ชัดเจนกว่ามาก
คุณไม่สามารถทำได้โดยไม่ต้องแก้ไขทุกอินสแตนซ์ HTML ดังนั้นฉันจึงเขียน JS เพื่อแทนที่:
jQuery:
//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );วานิลลา JS:
function nonBrHypens(id) {
var str = document.getElementById(id).innerHTML;
var txt = str.replace(/-/g, '‑');
document.getElementById(id).innerHTML = txt;
}ใช้คำว่า joiner character ( ⁠) รอบยัติภังค์ มันทำงานใน IE เช่นกัน
https://en.wikipedia.org/wiki/Word_joiner
แก้ไขยัติภังค์เฉพาะ ...
function fixicecream(text) {
return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}หรือทุกอย่าง ...
function fixhyphens(text) {
return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}ลองใช้ CSS นี้:
word-break: break-all;
-webkit-hyphens:none;
-moz-hyphens: none;
hyphens: none;