html (+ css): แสดงตำแหน่งที่ต้องการสำหรับการแบ่งบรรทัด

110

สมมติว่าฉันมีข้อความนี้ที่ต้องการแสดงในเซลล์ตาราง HTML:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

และฉันต้องการให้เส้นแบ่งตามหลักเครื่องหมายจุลภาค

มีวิธีบอกให้ HTML renderer ลองทำลายในจุดที่กำหนดและทำก่อนที่จะพยายามแบ่งช่องว่างหลังหนึ่งโดยไม่ใช้ช่องว่างที่ไม่ทำลายหรือไม่ ถ้าฉันใช้ช่องว่างที่ไม่ทำลายมันจะทำให้ความกว้างใหญ่ขึ้นโดยไม่มีเงื่อนไข ฉันต้องการให้เส้นแบ่งเกิดขึ้นหลังจากช่องว่างใดช่องหนึ่งหากอัลกอริทึมการตัดบรรทัดได้ลองใช้ด้วยเครื่องหมายจุลภาคก่อนและไม่สามารถทำให้เส้นพอดีได้

ฉันลองตัดส่วนข้อความในองค์ประกอบ แต่ดูเหมือนจะไม่เป็นประโยชน์อะไรเลย

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

หมายเหตุ: ดูเหมือนว่าพฤติกรรมCSS3text-wrap: avoidจะเป็นสิ่งที่ฉันต้องการ แต่ดูเหมือนจะใช้งานไม่ได้

html css word-wrap

— เจสันเอส
แหล่งที่มา

คุณสามารถใช้ช่องว่างที่ไม่ทำลายภายในช่วง

— Gabriele Petrioli

3

แต่ฉันไม่ต้องการที่จะใช้ที่ไม่ใช่ช่องว่าง -breaking ฉันชอบที่จะใช้ช่องว่าง "ไม่ต้องการทำลายที่นี่ แต่ฉันจะถ้าฉันมีให้" แต่เท่าที่ฉันรู้มีอยู่

— Jason S

@ เจสัน .. ฉันรู้สึกถึงคุณ .. แต่มันเป็นไปไม่ได้ .. เพิ่มคำตอบ.

— Gabriele Petrioli

drat นั่นคือสิ่งที่เกิดขึ้นเมื่อนักวิทยาศาสตร์คอมพิวเตอร์เขียนอัลกอริธึมการเรนเดอร์โดยไม่มีการป้อนข้อมูลจากตัวพิมพ์

— Jason S

1

คุณควรยอมรับคำตอบจาก @ EggertJóhannessonเนื่องจากเป็นวิธีแก้ปัญหาที่ดี!

— Gabriele Petrioli

156

โดยใช้

span.avoidwrap { display:inline-block; }

และการตัดข้อความที่ฉันต้องการเก็บไว้ด้วยกัน

<span class="avoidwrap"> Text </span>

มันจะห่อก่อนในบล็อกที่ต้องการจากนั้นเป็นชิ้นเล็ก ๆ ตามต้องการ

— Eggert Jóhannesson
แหล่งที่มา

16

ใช้งานได้ดี! หมายเหตุเพิ่มเติมเพียงอย่างเดียว: ช่องว่างที่จุดเริ่มต้นและจุดสิ้นสุดของอินไลน์บล็อกจะถูกละเว้นดังนั้นในการคั่นข้อความในบล็อกตามช่องว่างคุณต้องวางไว้ระหว่างบล็อกอินไลน์ ตัวอย่างเช่นถ้าช่วงที่ถูกเรียกขานที่จะกลายเป็นแบบอินไลน์บล็อกแล้วHello worldจะเป็นHelloworldและจะเป็นปกติHello world Hello world

— ผู้ใช้

2

มีความหมายมากขึ้นและออกจากการควบคุมในเบราว์เซอร์ซึ่งโดยทั่วไปเป็นสิ่งที่ดี ในกรณีนี้จะทำให้การทำลายเมื่อสำคัญเป็นไปได้

— Lodewijk

ใช้งานได้ดี - เมื่อมีความสำคัญตัวอักษรเช่น "-" ไม่หยุดพัก ตัวอย่าง: Perikles (um & nbsp; 500-429 & nbsp; v.Chr.)

— Sarah Trees

10

@Lodewijk: ไม่ระบุที่แนะนำสถานที่ที่จะทำลายเส้น แต่เป็นไปได้อย่างใดอย่างหนึ่ง

— Dan Dascalescu

1

โปรดทราบว่าเทคนิคนี้ใช้ได้กับs ที่ซ้อนกันเช่นกันดังนั้นคุณสามารถ (มีผล) ระบุลำดับชั้นของจุดพักที่ต้องการ

— Michael Dyck

24

มีโซลูชัน RWD ที่เรียบร้อยมากจากDan Mallที่ฉันชอบ ฉันจะเพิ่มที่นี่เนื่องจากคำถามอื่น ๆ เกี่ยวกับการแบ่งบรรทัดที่ตอบสนองถูกทำเครื่องหมายว่าซ้ำกับคำถามนี้
ในกรณีของคุณคุณมี:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

และ CSS หนึ่งบรรทัดในแบบสอบถามสื่อของคุณ:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

— Stephan Weinhold
แหล่งที่มา

7

คำตอบง่ายคือการใช้ตัวอักษรช่องว่างความกว้างศูนย์ มันถูกใช้สำหรับการทำbreakspaces ภายในคำที่จุดที่เฉพาะเจาะจง

ไม่ตรงข้ามแน่นอนของพื้นที่ที่ไม่ทำลาย   (ดีจริงคำช่างไม้ ⁠ ) ( คำช่างไม้เป็นรุ่นที่ศูนย์ความกว้างของพื้นที่ที่ไม่ทำลาย )

(นอกจากนี้ยังมีรหัสอื่น ๆ ที่ไม่ทำลายเช่นยัติภังค์ที่ไม่ทำลาย ‑ ) (นี่คือคำตอบที่ครอบคลุมสำหรับ 'ตัวแปร' ที่แตกต่างกันของnbsp )

หากคุณต้องการโซลูชัน HTML อย่างเดียว (ไม่มี CSS / JS) คุณสามารถใช้การผสมผสานระหว่างช่องว่างที่มีความกว้างเป็นศูนย์และพื้นที่ที่ไม่ทำลายอย่างไรก็ตามสิ่งนี้จะยุ่งมากและการเขียนเวอร์ชันที่มนุษย์สามารถอ่านได้นั้นต้องใช้ความพยายามเล็กน้อย .

ctrl+ c, ctrl+ vช่วย

ตัวอย่าง:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

อ่านไม่ออก? นี่คือ HTML เดียวกันที่ไม่มีแท็กความคิดเห็น:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

อย่างไรก็ตามเนื่องจากการแสดงผล html ของอีเมลไม่ได้รับการกำหนดมาตรฐานอย่างสมบูรณ์จึงเหมาะสำหรับการใช้งานประเภทนั้นเนื่องจากโซลูชันนี้ไม่ใช้CSS / JS

นอกจากนี้หากคุณใช้สิ่งนี้ร่วมกับโซลูชันที่ใช้พื้นฐานใด ๆคุณจะสามารถควบคุมอัลกอริทึมการทำลายบรรทัดได้อย่างสมบูรณ์

(หมายเหตุบรรณาธิการ :)

ปัญหาเดียวที่ฉันเห็นว่าคุณมีคือถ้าคุณต้องการเปลี่ยนจุดแตกหักที่ต้องการแบบไดนามิก สิ่งนี้จะต้องมีการจัดการ JS อย่างต่อเนื่องของแต่ละช่วงขนาดตามสัดส่วนและต้องจัดการเอนทิตี HTML เหล่านั้นในข้อความ

— ชุมชน
แหล่งที่มา

1

Span Hacks คืออะไร?

— Jason S

คำตอบอื่น ๆ ที่ใช้ประโยชน์จากแท็กช่วง

ฉันต้องการทราบด้วยว่าแม้ว่าโซลูชันนี้ดูเหมือนจะไม่ง่ายที่สุด แต่ก็น่าเชื่อถือที่สุดเนื่องจากเอนทิตีเหล่านั้นไม่ได้และไม่ควรเปลี่ยนการแสดงความหมายบ่อยครั้งในเบราว์เซอร์ตัวแยกวิเคราะห์อีเมลหรือตัวแยกวิเคราะห์ HTML อื่น ๆ

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

— isacvale

3

คำตอบคือไม่ ( คุณไม่สามารถเปลี่ยนอัลกอริทึมการทำลายบรรทัดที่ใช้ )

แต่มีวิธีแก้ปัญหาบางอย่าง ( คำตอบที่ดีที่สุดคือคำตอบที่ยอมรับได้ )

คุณสามารถเข้าใกล้ด้วยช่องว่างที่ไม่ทำลาย แต่เฉพาะระหว่างคำที่อยู่ด้วยกันเท่านั้น ( สิ่งที่คุณมีในระยะห่าง แต่ไม่อยู่หลังเครื่องหมายจุลภาค ) หรือใช้white-space:nowrapตามที่ @Marcel กล่าวถึงก็ได้

วิธีแก้ปัญหาทั้งสองวิธีทำสิ่งเดียวกันและทั้งสองจะไม่ทำลายกลุ่มคำหากไม่เข้ากับตัวเอง

— Gabriele Petrioli
แหล่งที่มา

อ๊าก. :-( ที่เหม็นนั่นหมายความว่าฉันต้องอยู่กับมันหรือฉันต้องพยายามตรวจจับเส้นยาวด้วยตัวเองเพื่อพยายามเอาชนะอัลกอริธึมการทำลายเส้น

— Jason S

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

— arootbeer

@arootbeer: ฉันสนับสนุนการแก้ไขของคุณ แต่ Gaby เปลี่ยนกลับ Gaby: ทำไม? คุณต้องการทำให้ผู้ใช้เข้าใจผิดหรือไม่?

— Dan Dascalescu

@DanDascalescu คำตอบทั้งหมดควรเปลี่ยนให้ชี้ไปที่คำตอบที่ยอมรับในหน้าเดียวกันหรือไม่ คำตอบของฉันมี 1 ( ผลรวม ) โหวตและมีคำตอบที่ยอมรับด้วยคะแนนโหวต 48 ฉันค่อนข้างมั่นใจว่าคนที่ได้รับการยอมรับคือคนที่ได้รับความสนใจ ( และถูกต้อง ) นอกจากนั้นฉันยืนยันว่าไม่มีวิธีเปลี่ยนอัลกอริธึมการทำลายที่ใช้ ( ตามที่ OP ขอ )

— Gabriele Petrioli

1

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

2

span { white-space:nowrap }ด้วยการใช้เครื่องหมายดังกล่าวข้างต้นขึ้นของคุณ มันดีอย่างที่คุณคาดไม่ถึงจริงๆ

— มาร์เซล
แหล่งที่มา

ขอบคุณ แต่นั่นใช้ไม่ได้เพราะโดยพื้นฐานแล้วมันแปลช่องว่างภายในspanองค์ประกอบเป็น และป้องกันไม่ให้ช่องว่างแตกเลย ฉันแค่อยากจะกีดกันไม่ให้ตัวเรนเดอร์แตกระหว่างไอเท็มชิ้นหนึ่งของฉัน แต่ถ้ามันต้องทำฉันก็อยากให้ทำเช่นนั้น

— Jason S

@ Jason S: ฉันได้เพิ่มตัวเลือกอื่น ๆ ในคำตอบของฉันแล้ว

— Marcel

วิธีการที่ แตกต่างกันกว่าพื้นที่หรือไม่? จากสิ่งที่ฉันบอกได้ตัวเลือกคือตัวละครที่กำหนดให้หยุดพักหรือไม่ ดังนั้น '-' และ '' และและและและทั้งหมดจึงอนุญาตให้มีการหยุดพัก (พิมพ์ยัติภังค์เว้นวรรคไม่มีอะไรและยัติภังค์อย่างเดียวเมื่อหยุดพักตามลำดับ) ในขณะที่ ไม่ทำ

— Jason S

@ Jason S: เพิ่มตัวอย่างการใช้งาน

— Marcel

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

— Jason S

1

คำตอบใหม่ตอนนี้เรามี HTML5:

HTML5 แนะนำแท็ก (ย่อมาจาก Word Break Opportunity)

การเพิ่มคำสั่งบอกให้เบราว์เซอร์หยุดตรงนั้นก่อนที่อื่นดังนั้นจึงเป็นเรื่องง่ายที่จะทำให้คำแตกหลังจากจุลภาค:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

ได้รับการสนับสนุนเบราว์เซอร์หลักทั้งหมดของฉันนอกเหนือจาก IE

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

12

-1. ทำไมไม่ทดสอบก่อนปรึกษา มันใช้ไม่ได้ มีวัตถุประสงค์อื่น ไม่ต้องพูดถึงว่าคำตอบนี้ซ้ำกับคำตอบที่มีมานานแล้ว

— ผู้ใช้

1

WBR ไม่มีวัตถุประสงค์อื่น developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Lodewijk

13

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

— Jukka K. Korpela

5

วิธีนี้ใช้ไม่ได้เลยในเบราว์เซอร์ใด ๆ คำตอบคือไม่ถูกต้อง: ไม่ได้จัดลำดับความสำคัญการแบ่งเส้นตรงช่องว่างสามัญ การห่อจึงเกิดขึ้นตามปกติในตัวอย่าง

— เอเดรีย

3

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

— อัฒภาค

-1

คุณสามารถปรับการตั้งค่าระยะขอบใน CSS (ขอบขวาในกรณีนี้)

text {
    margin-right: 20%;
}

— คนโง่
แหล่งที่มา

-3

ใช้<div>แทนหรือระบุคลาสสำหรับ SPAN และให้แอตทริบิวต์display: block

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

-5

มีองค์ประกอบ HTML สำหรับ™ที่: (ที่ได้มาตรฐานในขณะนี้) องค์ประกอบองค์ประกอบ

ฉันแนะนำให้คุณใช้ อาจใช้ไม่ได้ทุกที่แต่เป็นวิธีที่ดีที่สุดที่คุณสามารถทำได้โดยไม่ต้องใช้ห่วง

— Mathias Bynens
แหล่งที่มา

3

-1: ใช้สำหรับทำเครื่องหมายจุดพักด้วยคำที่ยาวมาก แต่ไม่สามารถแก้ปัญหาด้วยการแบ่งบรรทัดที่ต้องการได้

— ผู้ใช้

4

@ user3075942 ข้อความอ้างอิงโดยตรงจากข้อมูลจำเพาะ : " wbrองค์ประกอบแสดงถึงโอกาสในการแบ่งบรรทัด" นี่คือว่าสิ่งที่ OP ถามหา หยุดการลงคะแนนผู้คนตามสิ่งที่คุณอ่านบนวิกิ

— Mathias Bynens

3

ใช่โอกาส แต่เบราว์เซอร์มีโอกาสที่จะแตกช่องว่างอยู่แล้ว คำถามคือจะบอกเบราว์เซอร์ได้อย่างไรว่าควรแบ่งช่องว่างใด

— ผู้ใช้

1

... และคำตอบที่ได้คือการใช้งาน

— Mathias Bynens

8

ไม่นั่นไม่ใช่คำตอบ ไม่ได้เพิ่มความเป็นไปได้ในการใช้งานจุดพักที่มีอยู่ก่อนแล้วโดยเฉพาะ เพียงเพิ่มความเป็นไปได้ของจุดพักใหม่โดยที่ไม่มีอยู่แล้ว การมีสองตำแหน่งติดต่อกันไม่ได้ใช้ประโยชน์ใด ๆ developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Torin Finnemann