แนวทางปฏิบัติที่ดีที่สุดในการจัดการกับตัวแบ่งบรรทัดที่ต้องการในการออกแบบเว็บที่ตอบสนองคืออะไร

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

ตัวอย่างเช่นฉันอาจมีหัวข้อเช่น:

สิ่งใหม่ของเราคือสิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง!

ด้วยการไม่สนใจเส้นแบ่งเส้นแบ่งเช่นนี้:

สิ่งใหม่ของเราคือสิ่งที่ดีที่สุดตั้งแต่
หั่นขนมปัง!

ที่เว็บขนาดเต็มฉันต้องการแยกบรรทัดหลังจาก "ตัว" สร้างสองบรรทัด

สิ่งใหม่ของเราคือ
สิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง!

สำหรับหน้าจอที่มีความกว้างปานกลางฉันจะแบ่งสองครั้ง:

สิ่งใหม่ของเรา
คือสิ่งที่ดีที่สุด
ตั้งแต่หั่นขนมปัง!

สำหรับหน้าจอที่แคบลงฉันจะแตกหักหลังจาก "ใหม่" หลังจาก "thingamabob" และหลังจาก "สิ่ง" สร้างสี่บรรทัด

ของเราใหม่
thingamabob
เป็นสิ่งที่ดีที่สุด
ตั้งแต่ขนมปังหั่น!

ฉันจริงๆไม่ต้องการที่จะใช้แท็กแบ่ง ( <br>) เพราะที่ยากชุดแบ่งในทุกขนาด จนถึงตอนนี้ฉันได้ใช้เคียวรีสื่อบันทึกและเปอร์เซ็นต์ความกว้างสำหรับแท็กต่างๆh1- h5เพื่อให้ความกว้างของแท็กบังคับให้หยุดพัก แต่ดูเหมือนว่า "แฮ็ค" สำหรับฉัน (มันก็ค่อนข้างเจ้าอารมณ์ในบางครั้งตามข้อความจริง)

เป็นวิธีที่ดีที่สุดในการควบคุมตัวแบ่งบรรทัดโดยไม่ต้องเขียนโค้ดลงใน html อย่างไร

ฉันแค่ให้คำแนะนำนี้บนพื้นฐานที่ใช้สำหรับตัวอย่างสั้น ๆ ของข้อความและไม่ใช่ย่อหน้า

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

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

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

การทดสอบอย่างรวดเร็วเกี่ยวกับชุดคำเฉพาะของคุณควรเปิดเผยคำที่ดีที่สุดที่จะเชื่อมโยง

สำหรับตัวอย่างในคำถามนี้ HTML อาจมีลักษณะดังนี้:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

จริงๆแล้วมันไม่จำเป็นต้องใช้ CSS CSS ในตัวอย่างนี้ที่ฉันผลิตขึ้นเพื่อความสนุกสนาน

สรุปคีย์วิธีนี้คือการ จำกัด จำนวนสถานที่ที่ข้อความได้รับอนุญาตให้ทำลาย

หลังจากอ่านคำถามอีกครั้งฉันรู้ว่าฉันไม่ได้ตอบสนองความต้องการ สำหรับกรณีเฉพาะนี้และในกรณีที่มีหน้าอื่นที่ต้องการความสนใจเหมือนกันฉันจะกำหนดหน้าเดียว<br>สำหรับจุดพักแบบเต็มความกว้าง ฉันจะนำคลาสเดียวกันกลับมาใช้ใหม่ในแต่ละหน้าในสถานที่ที่เหมาะสมที่สุดในส่วนหัว

<br>คลาสนี้จะยุบในสิ่งที่เล็กกว่าการแสดงเต็มความกว้างราวกับว่ามันไม่ได้อยู่ที่นั่นด้วยการใช้เคียวรีสื่อบันทึก ที่วิวพอร์ตขนาดน้อยกว่าความกว้างเต็มเราพึ่งพา แต่เพียงผู้เดียว

อีกตัวอย่างที่มีซิงเกิ้ล<br>ที่ใกล้กับเครื่องหมาย

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

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

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

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

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

มีความเป็นปลั๊กอิน jQuery สำหรับว่ายอดคงเหลือข้อความ

มันเป็นปลั๊กอินที่สร้างโดยAdobe ที่text-wrap: balance;สร้างขึ้นพร้อมกับข้อเสนอของ Adobe เพื่อรับตัวเลือก CSSที่จะทำเช่นนี้เช่นเดียวกับคุณสมบัติยอดคงเหลือของ Adobe InDesign (ยอดเยี่ยม แต่ถึงแม้ว่ามันจะได้รับการยอมรับก็ตาม

อย่างไรก็ตามปลั๊กอินทำงานได้ทันที มันยอดองค์ประกอบใด ๆ ที่มีชั้นเรียนbalance-textหรือในการใช้ jQuery เช่น$('.some-elements').balanceText();

• นี่คือสาธิต Adobe อย่างเป็นทางการโดยใช้ข้อความที่เป็นธรรม

• นี่คือตัวอย่างที่ผมทำใช้จัดชิดซ้าย<h1>s - ตีแก้ไขเพื่อดูรหัส นี่แสดงให้เห็นข้อ จำกัด บางอย่างในขณะที่เขียน:

ข้อ จำกัด

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

ในการสาธิต 4 คุณจะเห็นว่าอะไรที่อยู่ในบล็อกของคุณของข้อความที่สมดุลเช่น<a>การเชื่อมโยง<span>หรือเน้นเช่น<em>, <strong>, <b>, <i>ฯลฯ จะถูกนำออก

นอกจากนี้เมื่อเปรียบเทียบการสาธิต 1, 2 และ 5 คุณจะเห็นว่าคุณจำเป็นต้องใช้ทั้งคลาส CSS และการเรียก jQuery

ดูเหมือนว่าจะมีความน่าเชื่อถือปานกลาง แต่บางครั้งก็มีข้อผิดพลาด - ในขณะที่เขียนมันจะลื่นขึ้นเมื่ออยู่ในคอลัมน์ด้านข้างทำให้เด็กกำพร้าโลน (แต่ดูเหมือนว่าจะทำงาน 95% + ของเวลาและฉันยังไม่เห็นมันลื่นยกเว้น เมื่ออยู่ในคอลัมน์ด้านข้างและด้วยเหตุผลที่ไม่ได้อธิบายการสาธิตของฉันไม่ทำงานบน Firefox แต่การสาธิตของ Adobe (ดีใน IE9 + ไม่สามารถทดสอบใน IE8 ได้ในขณะนี้) หากคุณใช้งานให้ใช้เวลาในการทดสอบ

ฉันต้องจัดการกับเรื่องนี้เป็นประจำด้วยข้อมูลจากนักออกแบบที่ต้องการให้สิ่งต่าง ๆ แตกต่าง ฉันได้พบวิธีที่ตรงไปตรงมาที่สุดในการทำเช่นนี้คือการใส่ช่วงที่มีคลาสในข้อความและจากนั้นให้มีช่วงนั้นdisplay: block;สำหรับแบบสอบถามสื่อ

ดังนั้นมันจะมีลักษณะดังนี้:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

แล้วฉันจะมี CSS ด้วยสิ่งนี้:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

คุณยังคงต้องผ่านมันไปเพื่อให้แน่ใจว่าสิ่งต่าง ๆ แตกต่างไปตามที่คุณต้องการในทุกด้าน

หากเป็นปัญหาที่พบบ่อยคุณสามารถสร้างชุดการแบ่งบรรทัดของคุณเองเป็น la Twitter Bootstrap หรือระบบกริดที่คุณกำลังใช้สร้างโมเดลชื่อคลาสหลังจากการตั้งชื่อแบบที่คุณใช้

คุณสามารถใช้ JavaScript เพื่อตรวจสอบความกว้างของหน้าจอและเขียนเวอร์ชันที่ถูกต้อง (ด้วย <br> ตามที่คุณมีพวกเขาในโพสต์ของคุณ) ลงใน div ที่ว่างเปล่าผ่าน innerHTML

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

วิธีการปัจจุบันของฉัน ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

และ CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

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

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

คุณสามารถเพิ่มwhite-space: nowrapและวาง<wbr>ในสถานที่ที่คุณต้องการอนุญาตให้ขึ้นบรรทัดใหม่ หากนี่ยังไม่เพียงพอและคุณต้องการการควบคุมที่ดีกับการสืบค้นสื่อ<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr