กำหนดวิธีการโอน คำยาว:
- เฉพาะที่มีขีดกลาง เว้นวรรค หรือ Enter เท่านั้น (ไม่รวมเว้นวรรคไม่แยกและยัติภังค์ไม่แยก −) ยัติภังค์จะเขียนระหว่างส่วนต่างๆ ของคำเดียว (เช่น สีแดง-เหลือง) และเขียนเส้นประระหว่างคำ "ยัติภังค์แบบอ่อน" - ปรากฏเฉพาะเมื่อจำเป็นต้องถ่ายโอนเท่านั้น หากคำนั้นไปไกลกว่าผู้ปกครองแล้ว หรือโอนส่วนโดยไม่มีเส้น นิพจน์ทางคณิตศาสตร์ใช้เครื่องหมายลบ (เช่น 5 − 2) หมายเลขโทรศัพท์จะแสดงแถบตัวเลข (เช่น +7 800 000‒00‒00) และทั้งหมดนี้ไม่เหมือนกับสิ่งที่คุ้นเคยบนคีย์บอร์ด
- หลังจากตัวละครใดๆ
- ตามกฎของภาษารัสเซียโดยใช้ยัติภังค์โดยอัตโนมัติ
ล้นห่อ
การตัดคำ
แบ่งคำ
เส้นแบ่ง
ยัติภังค์
ของเราหนึ่งพันเก้าร้อยเก้าสิบเก้ากิโลกรัมได้ตรวจใหม่แล้ว ถอนรากถอนโคนรถปราบดินโหลด
lang="รู"lang="รู">หนึ่งพันเก้าร้อยเก้าสิบเก้าของเราได้รับการตรวจสอบอีกครั้งแล้ว -
กิโลกรัมถอนราก-รถปราบดิน-รถตัก
อะไรคือความแตกต่างระหว่างทรัพย์สินหนึ่งกับอีกทรัพย์สินหนึ่ง?
ตามค่าเริ่มต้น คำที่ยาวจะไม่ใส่ยัติภังค์ เว้นแต่จะมีการระบุอย่างชัดเจนด้วยยัติภังค์ และขึ้นต้นในบรรทัดใหม่
เพื่อที่จะเพิกเฉยต่อขีดกลางที่มองเห็นได้ด้วยตาทันที เราจะเพิ่ม word-break: keep-all; -
เพื่อป้องกันไม่ให้เบราว์เซอร์ให้ความสนใจกับยัติภังค์แบบอ่อน ให้ใส่ยัติภังค์: none; -
หากจำเป็นต้องมีการตัดคำ ให้ตัดคำ: break-word; ฉันแนะนำให้คุณใช้มันเสมอเนื่องจากเบราว์เซอร์ทั้งหมดเข้าใจได้ มันแตกต่างจาก word-break: break-all; ซึ่งมีลำดับความสำคัญตรงที่คำที่ไม่พอดีกับบล็อกจะขึ้นบรรทัดใหม่ และนำเครื่องหมายยัติภังค์แบบอ่อนมาพิจารณาด้วย
ที่ การแบ่งปันแบ่งคำ: แบ่งทั้งหมด; ด้วยยัติภังค์: อัตโนมัติ; ส่วนอย่างหลังจะถูกละเว้น ยัติภังค์: อัตโนมัติ; วางยัติภังค์ใด ๆ ขึ้นอยู่กับดุลยพินิจของตน แต่เพื่อให้ใช้งานได้ คุณต้องระบุภาษาของคุณโดยระบุแอตทริบิวต์ lang="ru" ใน div
อย่าตัดคำไปบรรทัดอื่น
สมมติว่ารายการเมนูหรือปุ่มจะดูไม่ดีหากแยกออกจากกัน ดังนั้นจึงต้องห้ามการแยกจากกัน ในการดำเนินการนี้ ควรตั้งค่าคุณสมบัติข้างต้นทั้งหมดเป็นโหมด "เริ่มต้น" และเพิ่ม คลิกและดูสนามฝึกซ้อมของเรา
ควบคุมการตัดคำด้วยยัติภังค์: อัตโนมัติ;
เตตระไฮโดรไพรันิลไซโคลเพนทิลเตตระไฮโดรไพริโดไพริดีน
เตตระไฮโดรไพรันิลไซโคลเพนทิลเตตระไฮโดรไพริโด ไพริดิโนสูง
มักจะต้องเพิ่ม ย่อหน้าใหม่แต่ไม่มี บรรทัดว่างซึ่งถูกแทรกโดยแท็กย่อหน้า
สำหรับส่วนของข้อความบางส่วน การเว้นวรรคมาตรฐานนั้นไม่เหมาะสม สิ่งเหล่านี้อาจเป็นคำจารึกใต้รูปภาพและในตาราง บทกวี คำพูด เชิงอรรถ และบันทึกย่อ
หากต้องการบังคับให้ขึ้นบรรทัดใหม่จะมีการจัดเตรียมแท็กพิเศษซึ่งมีฟังก์ชันอยู่ในชื่อ br (แบ่งแถว - "แบ่งแถว, บรรทัด") แท็ก
ภาษา มาร์กอัปไฮเปอร์เท็กซ์ html หมายความว่าเนื้อหาทั้งหมดที่ตามมาจะต้องขึ้นบรรทัดใหม่ หากจำเป็น คุณสามารถเพิ่มแท็กหลายแท็กในแถวเพื่อให้ได้ระยะห่างที่ต้องการ
แท็ก
ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และไม่จำเป็นต้องมีแท็กปิดเพราะเหตุนี้ องค์ประกอบที่ว่างเปล่าแต่ควรทำความคุ้นเคยกับการปิดแท็กทั้งหมดจะดีกว่า ใน XHTML แท็กตัวแบ่งจะต้อง "ปิด" ด้วยแบ็กสแลช
ตัวอย่างการใช้แท็กแบ่ง
แท็ก br กำลังทำงานอยู่< /title></p><p><р>ขาดงาน</р></p><p><p>ไม่มีที่ไหนอีกแล้วและไม่เคย <br></p><p>ฉันไม่ได้แย่ขนาดนั้น <br></p><p>ผู้บังคับบัญชาเป็นฝูงที่โลภ <br></p><p>แทะฉันมีชีวิตอยู่</р></p><p>ขาดงาน</p><p>ไม่มีที่ไหนอีกแล้วและไม่เคย <br>ฉันไม่ได้แย่ขนาดนั้น <br>ผู้บังคับบัญชาเป็นฝูงที่โลภ <br>กำลังแทะฉันทั้งเป็น</p><h2>แอตทริบิวต์แท็ก <br></h2><p>คุณลักษณะเดียวที่มันมี <a href="https://redcomrade.ru/th/processors/teg-krasnoi-stroki-html-osnovnye-tegi-tegi-html/">แท็ก html</a> <br>เรียกว่า มันบอกเบราว์เซอร์ว่าจะทำอย่างไรกับการตัดบรรทัดหากข้อความต้องพันรอบสิ่งที่เรียกว่าองค์ประกอบลอยตัว ซึ่งอาจเป็นตัวอย่าง รูปภาพที่มีแอตทริบิวต์การจัดตำแหน่งโดยใช้ค่าขวา/ซ้าย หรือบล็อกใน CSS ที่มีคุณสมบัติ float กำหนดไว้</p><p>ในข้อกำหนด XHTML 1.0 / HTML 4.01 คุณลักษณะ clear สามารถใช้ได้เฉพาะกับ Transitional, Frameset และ<!DOCTYPE>มิฉะนั้นรหัสจะไม่ทำงาน</p><h2>คุณสมบัติแอตทริบิวต์แท็ก</h2><p>ผลกระทบของแอตทริบิวต์ clear ขึ้นอยู่กับค่าและตำแหน่งขององค์ประกอบแบบลอย แอตทริบิวต์สามารถรับได้ 4 ค่า:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy></p><p>ค่าด้านซ้ายป้องกันไม่ให้องค์ประกอบที่จัดชิดซ้ายตัดกัน ดังนั้นข้อความจะสะดุดทับแท็ก <br>จะอยู่ด้านล่างรูปภาพหรือองค์ประกอบลอยอื่นๆ</p><p>ผลลัพธ์เดียวกันทั้งหมดจะเป็นผลมาจากการใช้อาร์กิวเมนต์ทั้งหมด ซึ่งจะไม่อนุญาตให้ใช้ทางขวาหรือทางซ้าย</p><p>ค่าที่ถูกต้องจะป้องกันไม่ให้ข้อความพันรอบองค์ประกอบที่จัดชิดขวา ดังนั้นจะอยู่หลังแท็ก <br>ข้อความจะไม่มีทางเลือกอื่นนอกจากต้องวนรอบรูปภาพโดยเลื่อนไปทางขวา</p><p>โดยทั่วไปค่า none (“ทั้งของคุณหรือของเรา”) จะลบพลังทั้งหมดออกจากแอตทริบิวต์ clear และแท็ก <br>เลื่อนบรรทัดลงอย่างเงียบๆ</p><p>แอตทริบิวต์ที่ชัดเจนของแท็กไม่มีค่าเริ่มต้นเช่นนี้</p><h2>แท็ก <br>- นี่คือการโอนแบบนุ่มนวล</h2><p>แท็กตัวแบ่งบรรทัดมีประโยชน์มากสำหรับการสร้างระยะห่างที่จำเป็นระหว่างย่อหน้า ซึ่งภายในจะใช้เป็นตัวแบ่งแบบนุ่มนวล แต่ไม่ใช่สำหรับการแบ่งข้อความออกเป็นย่อหน้า</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>คุณไม่ควรใช้แท็กขึ้นบรรทัดใหม่มากเกินไปในการจัดรูปแบบข้อความ เนื่องจากผลลัพธ์ของการใช้แท็กดังกล่าวไม่ได้สวยงามเสมอไป</p><p>เช่น หากคุณใช้แท็ก <br>หากต้องการแบ่งบรรทัดภายในย่อหน้า ซึ่งอาจส่งผลให้ "หวี" ปรากฏในหน้าต่างของผู้ใช้ หากมีขนาดเล็กกว่าหน้าต่างที่ผู้ดูแลเว็บกำหนดเป้าหมาย</p>
<p>เรายังคงสำรวจความสามารถของ CSS3 ต่อไป และการตัดคำเป็นลำดับถัดไป การตัดคำเป็นคุณสมบัติที่มีประโยชน์มากเพราะจะทำให้ข้อความดูสวยงามบนหน้ามากขึ้น นอกจากนี้ บางครั้งคุณต้องสร้างคอลัมน์เหมือนในหนังสือพิมพ์ แล้วการจัดตำแหน่งด้านขวาหรือซ้ายก็ดูน่าเกลียด แต่ถ้าคุณขยายให้ทั่วทั้งคอลัมน์ก็จะเป็นการดีที่ตาจะอ่านข้อความดังกล่าว แต่ในกรณีนี้ก็มีความแตกต่างกันเล็กน้อยเช่นช่องว่างขนาดใหญ่ระหว่างคำซึ่งดูน่าเกลียด นี่คือสิ่งที่เราจะแก้ไขในบทเรียนนี้</p><p>คุณสมบัติ CSS3:</p><p>จากการศึกษาบทความที่ฉันเลือกให้คุณข้างต้น คุณจะได้เรียนรู้มากมายเช่นกัน <a href="https://redcomrade.ru/th/windows-7/gde-prikleit-zashchitnoe-steklo-na-telefon-funkcii-i-poleznye-svoistva/">คุณสมบัติที่เป็นประโยชน์</a>และเรียนรู้เกี่ยวกับคุณสมบัติใหม่ของ CSS3 ซึ่งช่วยให้คุณสามารถใช้รูปภาพบนเว็บไซต์น้อยลงเรื่อยๆ</p><h2>สร้างการใส่ยัติภังค์คำ</h2><h3>ข้อความที่ไม่มียัติภังค์</h3><p>หากใครไม่เข้าใจสิ่งที่คุณกำลังพูดถึง <a href="https://redcomrade.ru/th/power-supply/nikneim-akkaunta-o-kotorom-idet-rech-niki-dlya-igr-chto-takoe/">เรากำลังพูดถึง</a>นี่คือตัวอย่างโดยไม่ใช้การตัดคำ:</p><h3>ด้วยยัติภังค์</h3><p>และนี่คือตัวอย่างเมื่อเราใช้การถ่ายโอน <a href="https://redcomrade.ru/th/monitors/svoistva-css-intervaly-str-1-mezhsimvolnyi-mezhstrochnyi-interval-css/">คำซีเอสเอส</a>:</p><h3>เย็น! วิธีการทำเช่นนี้ในรหัส?</h3><p>ตอนนี้ผมคิดว่าทุกคนเข้าใจดีว่าเราจะทำอะไร ถึงเวลาเรียนรู้เกี่ยวกับคุณสมบัติใหม่ที่ CSS3 มีแล้ว!</p><p>และคุณสมบัตินี้เขียนแบบนี้ - ยัติภังค์</p><p>ง่ายใช่มั้ย? แต่แต่ละเบราว์เซอร์ก็มีคำนำหน้าของตัวเอง ดังนั้นในโค้ดจึงมีลักษณะดังนี้:</p><p>อย่าลืมยืดข้อความให้เต็มความกว้างของบล็อกโดยใช้ <a href="https://redcomrade.ru/th/security/kakie-znacheniya-mozhet-prinimat-svoistvo-text-align-html-vyravnivanie-teksta-po/">คุณสมบัติการจัดแนวข้อความ</a>: ให้เหตุผล มิฉะนั้น <a href="https://redcomrade.ru/th/windows-7/kak-vyigrat-v-rozygryshe-repostov-konkursy-vkontakte-kak/">ผลลัพธ์ที่ต้องการ</a>คุณจะไม่เห็น</p>
<p>ไม่ใช่แค่ผู้คนเท่านั้น แต่คำพูดยังเป็นเรื่องยากที่จะรับได้ เช่น สารประกอบเคมีก็คล้ายกับคนบางคนมากที่มี " <i>ล้มล้าง</i>- เราไม่รู้วิธีจัดการกับบุคลิกที่ยากลำบากเช่นนี้ แต่ CSS จะช่วยตัดคำได้อย่างแน่นอน:</p><h2>จะทน “ทนไม่ไหว” ไปทำไม</h2><p>ในกรณีส่วนใหญ่ เมื่อแสดงเนื้อหาข้อความบนหน้าเว็บในเบราว์เซอร์ จะไม่มีการใช้การตัดคำ หากคำไม่พอดีกับพื้นที่หน้าจอทั้งหมด ตามค่าเริ่มต้น คำนั้นจะสมบูรณ์ " <i>ย้าย</i>"ไปที่บรรทัดถัดไป</p><p>การใส่ยัติภังค์บางส่วนใช้กับคำที่ยาวและซับซ้อนซึ่งมีหลายคำและคั่นด้วยยัติภังค์ นี่คือจุดที่เกิดปัญหาในการแสดงคำเหล่านี้บนหน้าจอที่มีเส้นทแยงมุมและในที่แตกต่างกัน <a href="https://redcomrade.ru/th/security/chto-takoe-kuki-dlya-chego-oni-nuzhny-kak-ochishchat-cookies-v-brauzere-kak/">เบราว์เซอร์ที่แตกต่างกัน</a>- ขณะเดียวกันก็ทำนายได้อย่างแม่นยำว่าคำนั้นจะยาวนานแค่ไหน” <i>ดู</i>"มันยากในฝั่งไคลเอ็นต์ ดังนั้นการกำหนดยัติภังค์" <i>ด้วยตนเอง</i>" ไม่สมเหตุสมผล:</p><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_1.png' width="100%" loading=lazy loading=lazy></p><h3>การแก้ปัญหาการตัดคำโดยใช้ HTML</h3><p>ก่อนที่เราจะดูการตัดคำยาวๆ ใน CSS เรามาสำรวจว่าภาษาไฮเปอร์เท็กซ์สามารถแก้ปัญหานี้ได้อย่างไร <br>มีหลายตัวเลือกสำหรับสิ่งนี้ใน HTML: <br></p><ul><li><span>การใช้สัญลักษณ์ซอฟต์เบรก -</span>- ให้คุณกำหนดตำแหน่งการพักได้ <a href="https://redcomrade.ru/th/case/chto-takoe-aktiv-direktori-active-directory-chto-eto-prostymi/">คำประสม</a>- เมื่อปรับขนาดหน้าต่างเบราว์เซอร์เป็น <a href="https://redcomrade.ru/th/the-winchesters/gde-nastroit-krasnuyu-stroku-v-vorde-chtoby-sdelat-krasnuyu/">บรรทัดถัดไป</a>เฉพาะส่วนของคำยาวหลัง เท่านั้นที่ถูกใส่ยัติภังค์ และหลังจากครึ่งแรกจะแสดงยัติภังค์เหมือนยัติภังค์:</li>
</ul> <body>
<p>ตัวอย่างของสารประกอบทางเคมีที่ซับซ้อนและข้อความ - กรดเมทิลโพรพีลีนไดไฮดรอกซี-ไซซินนาเมนิลาคริลิก</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
<p><img src='https://i2.wp.com/sdteam.com/articles/img/22687_2.png' width="100%" loading=lazy loading=lazy></p><ul><li><span>การใช้แท็ก - องค์ประกอบปรากฏใน HTML 5</span>- นอกจากนี้ยังทำหน้าที่บอกเบราว์เซอร์ว่าควรแยกคำที่ซับซ้อนหรือยาวไปที่ใด แต่ต่างจากอักขระพิเศษก่อนหน้านี้แท็กนี้ไม่แสดงในตำแหน่ง “ <i>ความผิดพลาด</i>» การใส่ยัติภังค์ซึ่งอาจส่งผลเสียต่อความสามารถในการอ่านข้อความทั้งหมด:</li>
</ul> <style type="text/css">
wbr { display: inline-block; }
</style>
</head>
<body>
<p>เมทิลโพรพีลีน <wbr>ไดไฮดรอกซีซินนา <wbr>กรดเมนลาอะคริลิก</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
<p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_3.png' width="100%" loading=lazy loading=lazy></p><p>รองรับแท็กในเบราว์เซอร์บางตัว <wbr>ดำเนินการไม่ถูกต้อง มันจะใช้งานได้หากมีการระบุคุณสมบัติการแสดงผลที่มีค่า inline-block ในโค้ด CSS</p><h3>การห่อคำโดยใช้ CSS</h3><p>ก่อนที่เราจะปิดการใช้งานการตัดคำใน CSS เรามาดูคุณสมบัติบางอย่างที่สามารถแก้ปัญหาหลักได้:</p>
<ol><li>word-wrap – อธิบายวิธีการตัดคำที่ไม่พอดีกับความยาวของ <a href="https://redcomrade.ru/th/video-cards/kak-ustanovit-razmer-stranicy-kak-ustanovit-razmer-stranicy-kak-uvelichit/">มิติข้อมูลที่กำหนดไว้</a>คอนเทนเนอร์. เป็นการเตือนทันทีว่ามีปัญหาในการตรวจสอบคุณสมบัตินี้ และกลุ่ม W3C ยังไม่ได้ตัดสินใจใช้งานการสนับสนุนใน CSS ดังนั้น เครื่องมือตรวจสอบเฉพาะทางจะสร้างข้อผิดพลาดหากมีการตัดคำในโค้ด:</li>
</ol><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_4.png' width="100%" loading=lazy loading=lazy></p><p>อย่างไรก็ตาม คุณสมบัตินี้ "รับรู้" ของทุกคน <a href="https://redcomrade.ru/th/ram/chto-takoe-internet-brauzer-obshchie-ponyatiya-i-rabota-sovremennyh/">เบราว์เซอร์ที่ทันสมัย</a>และเป็น <a href="https://redcomrade.ru/th/motherboard/mercaet-ekran-na-noutbuke-effektivnye-sposoby-resheniya-problemy-polnyi/">โซลูชั่นที่มีประสิทธิภาพ</a>ปัญหาเกี่ยวกับการใส่ยัติภังค์ของคำยาว ๆ word-wrap ใช้ค่าต่อไปนี้: <br></p><ul><li>ปกติ – คำต่างๆ ไม่ถูกใส่ยัติภังค์</li><li>แบ่งคำ <a href="https://redcomrade.ru/th/multimedia/word-udalit-perenosy-strok-upravlenie-avtomaticheskimi-i-obychnymi/">โอนอัตโนมัติ</a>คำ;</li><li>inherit – สืบทอดค่าของพาเรนต์</li>
</ul><p>ตัวอย่างที่แสดงให้เห็นการใช้คุณสมบัตินี้:</p><p> <style type="text/css">
.container{
background-color: rgb(204,204,204);
padding:10px;
width:200px;
}
.content{
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<p class="content">เมทิลโพรพิลีน ไดไฮดรอกซีซินนาเมนิลาคริลิก แอซิด</p>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_5.png' width="100%" loading=lazy loading=lazy></p><p>ใน <a href="https://redcomrade.ru/th/processors/intel-core-i7-types-of-cores-new-memory-for-ssd/">ข้อกำหนดใหม่</a> word-wrap คุณสมบัติ CSS ได้รับการเปลี่ยนชื่อเป็น overflow-wrap คุณสมบัติทั้งสองยอมรับ <a href="https://redcomrade.ru/th/graphics-card/avtozapolnenie-yacheek-v-excel-ne-rabotaet-avtozapolnenie-form-kak-v-excel-zapolnit/">ค่าเดียวกัน</a>- แต่การสนับสนุน overflow-wrap ยังคงใช้งานได้ไม่ดี ดังนั้นจึงควรใช้ดีกว่า <a href="https://redcomrade.ru/th/graphics-card/skachat-staryi-skaip-vse-starye-versii-skype-kak-vernut-staruyu-versiyu-skype-dlya/">รุ่นเก่า</a>คุณสมบัติ:</p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_6.png' width="100%" loading=lazy loading=lazy></p><p>ดังที่คุณเห็นในภาพหน้าจอด้านบน คุณสมบัติใหม่ได้รับการสนับสนุน <a href="https://redcomrade.ru/th/processors/chto-delat-esli-ne-zapuskaetsya-brauzer-google-chrome-esli-google-chrome-ne/">กูเกิลโครม</a>แต่ไม่ได้รับการสนับสนุนใน IE ดังนั้นจึงเป็นการดีกว่าที่จะไม่ใช้ overflow-wrap สำหรับการตัดคำใน CSS <br></p><ol><li>word-break - กำหนดกฎสำหรับการแบ่งบรรทัดภายในคอนเทนเนอร์หากความกว้างไม่พอดีกับคอนเทนเนอร์ นี่เป็นคุณสมบัติใหม่และได้รับการสนับสนุนใน CSS3 ถูกต้อง แต่ได้รับการออกแบบมาให้ทำงานกับสตริง ดังนั้นการตัดคำจึงอาจไม่ถูกต้องตามหลักไวยากรณ์</li>
</ol><p>คุณสมบัติรับค่าสามค่า: <br></p>
<ul><li>ปกติ – ใช้กฎการโอนเริ่มต้น</li><li>ตัวแบ่งคำ - การขึ้นบรรทัดใหม่จะดำเนินการโดยอัตโนมัติเพื่อให้คำนั้นพอดีกับขนาดความกว้างของคอนเทนเนอร์</li><li>Keep-all – ปิดใช้งานการใส่ยัติภังค์คำอัตโนมัติในภาษาจีน ญี่ปุ่น และเกาหลี สำหรับภาษาอื่น ผลกระทบของค่าจะคล้ายกับปกติ</li>
</ul><p> <style>
.content {
font-size: 30px;
background: rgb(51,204,153);
width: 170px;
padding: 10px;
word-break:break-all;
}
</style>
</head>
<body>
<div class="content">
<p>ซินโครฟาโซตรอน</p>
<p>รัฐวิตกกังวล</p>
<p>นักเรียนชั้นประถมศึกษาปีที่สิบเอ็ด</p>
<p>เมทอกซีคลอโรไดเอทิลอะมิโนเมทิลบิวทิลามีน</p>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_7.png' width="100%" loading=lazy loading=lazy></p><ol><li>ยัติภังค์เป็นคุณสมบัติใหม่ที่เปิดตัวพร้อมกับการเปิดตัว CSS3 กำหนดวิธีที่เบราว์เซอร์จะจัดการกับการตัดคำในข้อความเอาต์พุต คุณสมบัติยอมรับค่าหลายค่า:</li>
</ol><ul><li>ไม่มี – ปิดใช้งานการตัดคำใน CSS;</li><li>คู่มือ( <i>ค่าเริ่มต้น</i>) – คำต่างๆ จะถูกล้อมไว้ในพื้นที่ของบล็อกข้อความที่ระบุโดยใช้แท็ก <wbr>หรือ <a href="https://redcomrade.ru/th/multimedia/myagkii-perenos-v-vorde-sochetanie-klavish-kinogo-goryachie-klavishi/">โอนอ่อน</a> (-)
;</li><li>อัตโนมัติ – เบราว์เซอร์จะตัดคำโดยอัตโนมัติตามการตั้งค่า</li>
</ul><p>สำหรับ <a href="https://redcomrade.ru/th/case/pochemu-ne-zagruzhayutsya-igrovye-dannye-v-bluestacks-ispravlyaem-problemy-zapuska-bluestacks/">การดำเนินการที่ถูกต้อง</a>คุณสมบัติในแท็ก <html>หรือ <p>แอตทริบิวต์ lang จะต้องปรากฏพร้อมกับค่า "ru" (lang="ru")</p><p>รองรับคุณสมบัติแล้ว <a href="https://redcomrade.ru/th/internet/opengl-poslednyaya-versiya-opengl-poslednyaya-versiya-opengl-poslednyaya-versiya/">เวอร์ชันล่าสุด</a> IE, โอเปร่า และ Firefox แต่ละคนมีของตัวเอง <a href="https://redcomrade.ru/th/the-winchesters/kak-sdelat-otstup-mezhdu-strokami-v-html-izmeniv-rasstoyanie/">เส้นซีเอสเอส</a>- Google Chrome ไม่รองรับยัติภังค์ ตัวอย่าง:</p><p> <style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="content" lang="ru">เมทิลโพรพิลีน ไดไฮดรอกซีซินนาเมนิลาคริลิก แอซิด</p>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</p><p><img src='https://i1.wp.com/sdteam.com/articles/img/22687_8.png' width="100%" loading=lazy loading=lazy></p><h3>ข้อห้ามในการใส่ยัติภังค์คำ</h3><p>บางครั้งคุณต้องแน่ใจว่าแสดงทั้งบรรทัดโดยไม่มีการเว้นวรรค การห้ามการตัดคำใน CSS สามารถทำได้หลายวิธี: <br></p><ul><li>โดยการใช้ <a href="https://redcomrade.ru/th/internet/kak-ustanovit-nerazryvnyi-probel-nerazryvnyi-probel-v/">พื้นที่ไม่ทำลาย</a> ซึ่งติดตั้งไว้ที่ตัวแบ่งบรรทัดหรือตัวแบ่งคำ</li><li>โดยการกำหนดคุณสมบัติ <i>พื้นที่สีขาว</i>ความหมาย " <i>ตอนนี้แรป</i>» ( <i>พื้นที่สีขาว: nowrap</i>
).</li>
</ul><p>ตัวอย่างการใช้งาน:</p><p> <style type="text/css">
.container{
background-color: rgb(153,255,204);
padding:10px;
width:200px;
}
.content{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.nowrap
{
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<p>เมทิลโพรพีลีน ไดไฮดรอกซีซินนาเมนิลาคริลิก แอซิด เท่า</p>
<p class="content" lang="ru">เมทิลโพรพีนิลีนไดไฮดรอกซีซินนาเมนิลาครีลิคสอง</p>
<p class="nowrap">เมทิลโพรพีนิลีนไดไฮดรอกซีซินนาเมนิลาคริลิกแอซิดไตร</p>
<p>เมทิลโพรพีนิลีนไดไฮดรอกซีซินนาเมนิลาคริลิกแอซิดเตตร้า</p>
</div>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
</body>
</p><p><img src='https://i0.wp.com/sdteam.com/articles/img/22687_9.png' width="100%" loading=lazy loading=lazy></p><p>ตอนนี้คุณสามารถโอนจาก <a href="https://redcomrade.ru/th/case/neskolko-sovetov-kak-pri-pomoshchi-css-ubrat-podcherkivanie-ssylok-v-html-kak-cherez/">ใช้ CSS</a>แม้แต่คำพูดที่ยาวที่สุด แต่คุณจะต้องจัดการกับปัญหาของคนรับยากด้วยตัวเอง ลองมีอิทธิพลต่อพวกเขาด้วยวิธี CSS</p>
<p>เมื่อสร้างเลย์เอาต์ผู้ดูแลเว็บจะมีคำถามเป็นระยะ: ข้อความจะถูกถ่ายโอนอย่างไร? ในกรณีส่วนใหญ่ เบราว์เซอร์จะจัดการงานนี้ด้วยตัวเอง แต่บางครั้งกระบวนการนี้ก็ต้องได้รับการควบคุม โดยเฉพาะอย่างยิ่งเมื่อจัดรูปแบบคำและวลียาวๆ ซึ่งหากแปลไม่ถูกต้องจะสูญเสียความหมาย</p> <h2>คุณสมบัติการตัดคำ</h2> <p>ใน HTML มีแท็กพิเศษเพื่อแยกบรรทัด <br>- แต่การใช้งานบ่อยเกินไปถือเป็นมารยาทที่ไม่ดีในหมู่นักพัฒนาและมักบ่งบอกถึงความไม่เป็นมืออาชีพ เพื่อเป็นการพิสูจน์ ลองจินตนาการว่าคุณมีโลโก้ และคุณต้องการให้ตัวอักษรแต่ละตัวขึ้นต้นบรรทัดใหม่:</p><p> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>การตรวจสอบการเรียบเรียงคำใหม่
