ไม่มีการแบ่งบรรทัดหลังจากยัติภังค์

340

ฉันกำลังมองหาเพื่อป้องกันการแบ่งบรรทัดหลังจากยัติภังค์-ในแต่ละกรณีที่เข้ากันได้กับเบราว์เซอร์ทั้งหมด

ตัวอย่าง:

ฉันมีข้อความนี้: 3-3/8"ซึ่งใน HTML คือ: 3-3/8”

ปัญหาคือใกล้ถึงจุดสิ้นสุดของบรรทัดเนื่องจากเครื่องหมายยัติภังค์มันแบ่งและล้อมรอบบรรทัดถัดไปแทนที่จะปฏิบัติเหมือนคำเต็ม ...

3-
3/8"

ฉันได้ลองใส่ "ความกว้างเป็นศูนย์ไม่มีอักขระหยุดพัก" โดยไม่มีโชค ...

3-&#65279;3/8&rdquo;

ฉันเห็นสิ่งนี้ใน Safari และคิดว่ามันจะเหมือนกันในทุกเบราว์เซอร์

ต่อไปนี้คือการdoctypeเข้ารหัสของฉันและตัวละคร ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

มีวิธีใดที่ฉันสามารถป้องกันสิ่งเหล่านี้ไม่ให้เกิดการแตกหักหลังจากยัติภังค์? ฉันไม่ต้องการโซลูชันใด ๆ ที่ใช้กับทั้งหน้า ... สิ่งที่ฉันสามารถแทรกได้ตามต้องการเช่น "ความกว้างศูนย์ไม่มีอักขระหยุดพัก" ยกเว้นที่ใช้งานได้

นี่คือตัวอย่าง เพียงแค่ทำให้เฟรมแคบลงจนเส้นแบ่งที่ขีดกลาง

http://jsfiddle.net/RagKH/

— สปาร์ก
แหล่งที่มา

@EricLeschinski ได้ถูกโพสต์แล้วเป็นคำตอบ: stackoverflow.com/a/12362315/594235

— Sparky

ด้วย charset = utf-8 คุณสามารถใส่ - ยัติภังค์ที่ไม่ทำลาย

— QuentinUK

@QuentinUK ใช่มั้ย ... นั่นเป็นคำตอบที่ยอมรับแล้วเหรอ? ‑เป็นเครื่องหมายขีดคั่นไม่แตก

— Sparky

& # 8209; เป็น ASCII สามัญดังนั้นจึงไม่จำเป็นต้องใช้ utf-8 ด้วยการเข้ารหัส utf-8 ของหน้ามันเป็นไปได้ที่จะใส่ในตัวละครที่เกิดขึ้นจริง - ไม่ใช่ตัวอักษรเดียวกันกับ - แม้ว่าจะดูเหมือนกัน

— QuentinUK

ใช้ HTML ที่ถูกต้องสำหรับสิ่งที่คุณเขียนจะเป็นหรือ3-3/8″ 3-3/8″คำพูดไม่เฉพาะช่วงเวลา หากคุณต้องการใน ASCII แท้เพียงใช้เครื่องหมายคำพูดคู่แทน ( ") โดยเฉพาะอย่างยิ่งถ้ามันจะถูกนำเสนอเป็นข้อความที่ดีอ่านง่ายคุณจะต้องใช้แทนการ33/8</style>″แสดง '3⅜″'

— ผู้ชายกระป๋อง

579

‑ลองใช้ยัติภังค์ไม่ใช่ทำลาย ฉันได้แทนที่เส้นประด้วยตัวละครนั้นใน jsfiddle ของคุณหดกรอบลงให้เล็กที่สุดเท่าที่จะทำได้และเส้นก็ไม่แยกอีกต่อไป

— CanSpice
แหล่งที่มา

10

ฉันคิดว่ามันเป็นสิ่งที่ต้องการพื้นที่ที่ไม่ได้หมดดังนั้นฉันเพิ่งค้นหา 'รีบไม่ใช่ทำลาย' และจบลงที่นี่ :-)

— CanSpice

อ่าาา ... ข้าค้นหา"ตัวละครไม่หยุด"แล้วก็พบกับสิ่งนั้น มันไม่เคยเกิดขึ้นกับฉันเลยว่ามีตัวละครยัติภังค์แบบสแตนด์อโลนที่ไม่แตก

— ปาร์ก

6

ใน IE8 / 9 อักขระนี้จะแสดงผลยาวกว่าเครื่องหมายขีดกลาง ดูเหมือนว่าจะมีขนาดเท่ากันกับการขีดกลาง

— mrtsherman

21

สาเหตุที่ผลลัพธ์อาจแตกต่างจากเครื่องหมายยัติภังค์ปกติคือแบบอักษรจำนวนมากไม่มีการใส่ยัติภังค์แบบไม่แตกหัก กองกำลังนี้เบราว์เซอร์ที่จะใช้ตัวอักษรที่แตกต่างกันและในขณะที่ยัติภังค์ไม่ใช่ทำลายลักษณะเดียวกับยัติภังค์ปกติที่ตัวอักษรไม่มีการรับประกันว่ามันตรงกับยัติภังค์ตามปกติจากตัวอักษรที่แตกต่างกัน

— Jukka K. Korpela

5

ฉันคิดว่าคำตอบของ Deb นั้นดีที่สุด

— Ray Cheng

257

คุณสามารถรวมข้อความที่เกี่ยวข้องด้วย

<span style="white-space: nowrap;"></span>

— หญิงที่เข้าสังคมครั้งแรก
แหล่งที่มา

17

ใช่นี่เป็นคำตอบที่ดีกว่าคำตอบที่ยอมรับได้ ขอบคุณ @Deb

— CMH

38

@CMH สิ่งนี้ไม่ช่วยถ้าคุณต้องการตัด whitespaces (พื้นที่ว่างที่ผู้ใช้เห็นพื้นที่สีขาว - ไม่มีอะไร) แต่คุณไม่ต้องการแยกคำด้วยเครื่องหมายยัติภังค์เช่นคำว่า "อีเมล" คำตอบที่ยอมรับได้ช่วยในกรณีนี้

— xmojmr

12

ในกรณีนี้คุณสามารถใช้การขยายเฉพาะรอบ "อีเมล"

— guirto

3

@ CMH นี้เป็นคำตอบที่ดีที่ยังใช้งานได้ดังนั้นฉันได้รับการโหวต อย่างไรก็ตามฉันเลือกที่จะไม่ยอมรับคำตอบนี้เพราะฉันขอตัวละครที่จะไม่ข้ามไปยังบรรทัดถัดไปโดยอัตโนมัติ ความจริงที่ว่า "เครื่องหมายยัติภังค์ไม่ทำลาย" ( ‑) อาจแสดงได้ยาวกว่าเครื่องหมายยัติภังค์ปกติในเบราว์เซอร์บางตัวเล็กน้อยสำหรับฉัน

— Sparky

11

@Sparky ปัญหาหนึ่งที่มีการใช้ตัวอักษรต่างกันคือมันทำให้ผลลัพธ์การค้นหาสับสน การพยายามหา "3-3 / 8" บนหน้าจะไม่พบเครื่องหมายขีดสั้น

— นาย Lister

23

IE8 / 9 แสดงเครื่องหมายยัติภังค์ที่ไม่ได้กล่าวถึงในคำตอบของ CanSpice นานกว่าเครื่องหมายขีดกลางทั่วไป มันคือความยาวของเส้นประแทนที่จะเป็นเครื่องหมายขีดกลาง ความแตกต่างของการแสดงผลนี้เป็นตัวแบ่งข้อตกลงสำหรับฉัน

เนื่องจากฉันไม่สามารถใช้คำตอบ CSS ที่ระบุโดย Deb I แทนเลือกใช้ไม่มีแท็กหยุดพัก

<nobr>e-mail</nobr>

นอกจากนี้ฉันพบสถานการณ์ที่เฉพาะเจาะจงซึ่งทำให้ IE8 / 9 หยุดยัติภังค์

สตริงมีคำคั่นด้วยช่องว่างไม่ทำลาย -  
ความกว้างมี จำกัด
มีเส้นประ

IE แสดงผลเช่นนี้

ตัวอย่างการขีดกลางใน IE8 / 9

รหัสต่อไปนี้ทำซ้ำปัญหาภาพด้านบน ฉันต้องใช้เมตาแท็กเพื่อบังคับให้แสดงผลกับ IE9 เนื่องจาก IE10 ได้แก้ไขปัญหาแล้ว ไม่มีซอเพราะมันไม่รองรับเมตาแท็ก

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

— mrtsherman
แหล่งที่มา

6

การใช้nobrเป็นวิธีข้ามเบราว์เซอร์มากที่สุดและทำงานได้อย่างอิสระจากแบบอักษรและ CSS nobrองค์ประกอบไม่ได้กำหนดในรายละเอียด HTML แต่นี้ควรได้รับการยกย่องว่าเป็นพิธีเท่านั้น แต่ถ้าคุณต้องเขียนด้วยข้อกำหนด HTML ดังนั้นคำตอบของ Deb โดยใช้ CSS เป็นตัวเลือกที่ดีที่สุด

— Jukka K. Korpela

5

ฉันสงสัยว่าทำไมคุณไม่สามารถใช้โซลูชัน CSS

— Ryan Ahearn

2

@RyanAhearn - ฉันใช้เครื่องมือของบุคคลที่สามซึ่งไม่ให้ฉันควบคุม HTML ได้มากนัก ไม่สนับสนุนการประกาศแท็กแบบอินไลน์

— mrtsherman

แทนที่จะเป็น '' คุณจะไม่ได้ใช้เพียงแค่ span กับคลาสและควบคุมด้วย CSS หรือไม่?

— StephenESC

1

โปรดทราบว่าnobrแท็กนั้นไม่ได้มาตรฐานและอาจแตกหักได้ตลอดเวลา เอกสาร MDN ไม่แนะนำให้ใช้แท็กนี้: developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

นอกจากนี้คุณยังสามารถทำได้ด้วย "วิธีการเข้าร่วม" โดยการแทรก " U+2060Word Joiner "

หากAccept-Charsetอนุญาตให้ใช้อักขระยูนิโค้ดเองสามารถแทรกลงในเอาต์พุต HTML ได้โดยตรง

มิฉะนั้นสามารถทำได้โดยใช้การเข้ารหัสเอนทิตี เช่นเพื่อเข้าร่วมข้อความred-brownให้ใช้:

red-&#x2060;brown

หรือ (เทียบเท่าทศนิยม):

red-&#8288;brown

. อักขระที่ใช้งานได้อีกอย่างหนึ่งคือ " U+FEFFSpace Width No-break Space " ^{^[⁠⁠1]} :

red-&#xfeff;brown

และ (เทียบเท่าทศนิยม):

red-&#65279;brown

^{[1] : หมายเหตุว่าในขณะที่วิธีการนี้ยังคงทำงานในเบราว์เซอร์ที่สำคัญเช่น Chrome จะได้รับการคัดค้านตั้งแต่ Unicode 3.2}

การเปรียบเทียบ "วิธีการเชื่อมต่อ" กับ " U+2011ยัติภังค์แบบไม่แตก ":

ตัวเชื่อมคำสามารถใช้กับอักขระอื่นทั้งหมดไม่ใช่แค่เครื่องหมายขีดคั่น
เมื่อใช้คำว่า "ช่างไม้" เครื่องมือสร้างภาพส่วนใหญ่จะทำให้ข้อความเหมือนเดิม ใน Chrome, FireFox, IE และ Opera การแสดงผลของเครื่องหมายขีดกลางปกติเช่น:

ABCDEFGHIJKLMNOPQRSTU VWXYZ-

เหมือนกับการแสดงผลของยัติภังค์ปกติ (ด้วย U + 2060 Word Joiner) เช่น:

A-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠r-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

ในขณะที่สองเรนเดอร์ดังกล่าวนั้นแตกต่างจากการแสดง " Hyphen ที่ไม่แตก " เช่น:

A-B-C-d-E-F-g-H-I-J-k-l-M-n-o-P-Q-R-s-T-U-V-W-x-y- Z

. (ขอบเขตของความแตกต่างนั้นขึ้นอยู่กับเบราว์เซอร์และขึ้นอยู่กับแบบอักษรเช่นเมื่อใช้การประกาศแบบอักษรของ " arial", Firefox และ IE11 แสดงรูปแบบที่ค่อนข้างใหญ่ในขณะที่ Chrome และ Opera แสดงรูปแบบขนาดเล็ก)

การเปรียบเทียบ "วิธีการเชื่อม" กับ(CSS .c1 {white-space:nowrap;}) และ:

ผู้เข้าร่วมคำสามารถใช้ในสถานการณ์ที่ จำกัด การใช้แท็ก HTML เช่นรูปแบบของเว็บไซต์และฟอรัม
ในสเปกตรัมของงานนำเสนอและเนื้อหาส่วนใหญ่จะพิจารณาคำว่าช่างไม้ใกล้ชิดกับเนื้อหามากกว่าเมื่อเทียบกับแท็ก

^{•ผ่านการทดสอบบน Windows 8.1 Core 64 บิตโดยใช้:

    • IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (รุ่นเป็นทางการ) m (32 บิต)

    • Opera 35.0.2066.92}

— Pacerier
แหล่งที่มา

ดูเหมือนว่า "U + FEFF Zero Width No-break Space" ทำงานไม่ถูกต้องใน IE11

— Ivan Gusev

ดูเหมือนว่า "U + 2060" จะไม่ทำงานหาก "-" ตามด้วย unicode char: เช่นนี้bingo-⁠bongo

— Ivan Gusev

แม้จะมีการกดลบคงที่

— JamesWilson

6

ไปงานปาร์ตี้สาย แต่ฉันคิดว่านี่เป็นงานที่สง่างามที่สุด ใช้อักขระ WORD JOINER Unicode & # 8288 ; ที่ด้านใดด้านหนึ่งของยัติภังค์หรือประประหรือตัวละครใด ๆ

ดังนั้นเช่น:

&#8288;—&#8288;

สิ่งนี้จะรวมสัญลักษณ์ที่ปลายทั้งสองด้านเข้ากับเพื่อนบ้าน (โดยไม่เพิ่มช่องว่าง) และป้องกันการแตกหัก

— Eckstein
แหล่งที่มา

ฉันสามารถทำให้มันทำงานโดยใช้ ALT + 0173 (ยัติภังค์อ่อน) ด้วยเหตุผลบางอย่างใน Windows 10

— pspahn