Css ห่อตัวอักษรขึ้นบรรทัดใหม่ ยัติภังค์คำ เปิดการใส่ยัติภังค์สำหรับคำที่ไม่เหมาะสม

คำอธิบาย

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

ข้อความที่อยู่ในคอนเทนเนอร์นี้จะแสดงพร้อมช่องว่างทั้งหมดตามที่ผู้ใช้จัดรูปแบบไว้  ดังนั้น white-space จึงเลียนแบบการทำงานของแท็ก 
แต่ต่างจากนี้ คือ มันไม่เปลี่ยนฟอนต์เป็นโมโนสเปซ

ไวยากรณ์
white-space: ปกติ |  นาวแรป |  ก่อน |  พรีไลน์ |  ห่อก่อน |  สืบทอด
ค่า
ข้อความปกติจะแสดงในหน้าต่างเบราว์เซอร์ตามปกติ ตัวแบ่งบรรทัดจะถูกตั้งค่าโดยอัตโนมัติ  nowrap ช่องว่างจะถูกละเว้น ตัวแบ่งบรรทัดจะถูกละเว้นในโค้ด HTML ข้อความทั้งหมดจะแสดงในบรรทัดเดียว  อย่างไรก็ตามเพิ่มแท็ก 
ตัดข้อความขึ้นบรรทัดใหม่  ก่อนหน้า ข้อความจะแสดงรวมถึงช่องว่างและยัติภังค์ทั้งหมดตามที่ผู้พัฒนาได้เพิ่มไว้ในโค้ด HTML  หากบรรทัดยาวเกินไปที่จะพอดีกับหน้าต่างเบราว์เซอร์ แถบเลื่อนแนวนอนจะถูกเพิ่มเข้ามา  ช่องว่างก่อนบรรทัดจะไม่ถูกนำมาพิจารณาในข้อความ ข้อความจะถูกตัดไปยังบรรทัดถัดไปโดยอัตโนมัติ หากไม่พอดีกับพื้นที่ที่ระบุ  pre-wrap ช่องว่างและตัวแบ่งทั้งหมดจะถูกเก็บไว้ในข้อความ อย่างไรก็ตาม หากความกว้างของบรรทัดไม่พอดีกับพื้นที่ที่ระบุ ข้อความจะถูกตัดไปยังบรรทัดถัดไปโดยอัตโนมัติ  สืบทอดค่าจากพาเรนต์ 
ผลกระทบของค่าในข้อความจะแสดงในตาราง  1.
HTML5 CSS2.1 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 
ตัวอย่าง
 

 
 
 ทฤษฎีบทสุดท้ายของแฟร์มาต์

 NS NS+ Y NS= Z NS
โดยที่ n เป็นจำนวนเต็ม> 2
 
 
 

ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  1.
ข้าว.  1. การใช้คุณสมบัติช่องว่างสีขาว
แบบจำลองวัตถุ
document.getElementById ("elementID") .style.whiteSpace
เบราว์เซอร์
Internet Explorer สูงสุดและรวมถึง 7.0 ไม่สนับสนุน pre-line, pre-wrap และ inherit  สำหรับ </p>
<p>Opera ก่อนเวอร์ชัน 9.5 ไม่รองรับค่าพรีบรรทัด  สำหรับ <textarea>ค่าปกติและค่าล่วงหน้าจะทำงานเหมือนก่อนตัดตอน และค่า Nowrap จะทำงานเหมือนค่าพรีบรรทัด</p>
<p>Safari ก่อนหน้า 3.0 และ iOS ไม่รองรับค่า pre-wrap และ pre-line</p>
<p>Firefox จนถึงและรวมถึงเวอร์ชัน 2.0 ไม่สนับสนุนค่า pre-line และ pre-wrap  สำหรับ <textarea>ค่า normal, nowrap และ pre จะถูกตีความว่าเป็นค่า pre-wrap</p>
<p>กำหนดวิธีการห่อคำยาว:</p><ol><li>เฉพาะในกรณีที่มีขีดคั่น เว้นวรรค หรือ Enter (ยกเว้น ช่องว่างไม่แตกและยัติภังค์ไม่แตก -)  ยัติภังค์เขียนระหว่างส่วนต่างๆ ของคำหนึ่งคำ (เช่น สีแดงและสีเหลือง) ระหว่างคำ - เครื่องหมายขีดกลาง  "ยัติภังค์อ่อน" - ปรากฏขึ้นเมื่อจำเป็นต้องใส่ยัติภังค์เท่านั้น  หากคำนั้นอยู่นอกขอบเขตของผู้ปกครองแล้ว <wbr>หรือโอนบางส่วนโดยไม่มียัติภังค์  เครื่องหมายลบใช้ในนิพจน์ทางคณิตศาสตร์ (เช่น 5 - 2)  สายดิจิทัลจะแสดงในหมายเลขโทรศัพท์ (เช่น +7 800 000‒00‒00)  และทั้งหมดนี้ไม่คุ้นเคย - นั่นคือบนแป้นพิมพ์</li><li>หลังอักขระใดๆ</li><li>ตามกฎของภาษารัสเซียด้วยยัติภังค์อัตโนมัติ</li>
</ol><input id="dva" type="checkbox"><p><b>ล้นห่อ</b> <input id="raz100" name="raz100" checked type="radio"><input id="raz101" name="raz100" type="radio"><br><b>ตัดคำ</b> <input id="raz200" name="raz200" checked type="radio"><input id="raz201" name="raz200" type="radio"><br><b>แตกคำ</b> <input id="raz300" name="raz300" checked type="radio"><input id="raz301" name="raz300" type="radio"><input id="raz302" name="raz300" type="radio"><br><b>ตัวแบ่งบรรทัด</b> <input id="raz400" name="raz400" checked type="radio"><input id="raz401" name="raz400" type="radio"><input id="raz402" name="raz400" type="radio"><input id="raz403" name="raz400" type="radio"><br><b>ยัติภังค์</b> <input id="raz500" name="raz500" checked type="radio"><input id="raz501" name="raz500" type="radio"><input id="raz502" name="raz500" type="radio"></p><p>หนึ่งพันเก้าร้อยเก้าสิบเก้ากิโลกรัมของเราถูกตรวจสอบใหม่แล้ว <span>grubber-bulldozer-loader</p><p>
 <style>
.div {
 overflow-wrap: <b>normal;
</b><b>break-word;
</b> <i>/* не поддерживает IE, Firefox; является копией word-wrap */
</i>
 word-wrap: <b>normal
</b><b>break-word
</b>;
 word-break: <b>normal;
</b><b>keep-all;
</b><b>break-all;
</b> <i>/* не поддерживает Opera12.14, значение keep-all не поддерживается IE, Chrome */
</i>
 line-break: <b>auto
</b><b>loose
</b><b>normal
</b><b>strict
</b>; <i>/* нет поддержки для русского языка */
</i>
<b> -webkit-hyphens: none;
</b><b> -webkit-hyphens: auto;
</b> <b>-ms-hyphens: none;
</b><b>-ms-hyphens: auto;
</b> hyphens: <b>manual
</b><b>none
</b><b>auto
</b>; <i>/* значение auto не поддерживается Chrome */
</i>
 width: 50%;
<b> white-space: nowrap;
</b>}
</style>
<div class="div" <b>แลง = "รู"</b><b>แลง = "รู"</b>> หนึ่งพันเก้าร้อยเก้าสิบเก้าของเราถูกตรวจสอบใหม่แล้ว <b>-
</b>กิโลกรัม grubber-bulldozer-loader</div></p>
<h3>อะไรคือความแตกต่างระหว่างคุณสมบัติหนึ่งกับอีกคุณสมบัติหนึ่ง</h3>
<p>ตามค่าเริ่มต้น คำที่ยาวจะไม่ถูกใส่ยัติภังค์เว้นแต่จะมีการระบุโดยขีดกลางอย่างชัดแจ้ง และขึ้นบรรทัดใหม่</p><p>เพื่อละเว้นเส้นที่มองเห็นได้ในทันที เราจึงเพิ่มคำว่า-break: keep-all;  ...</p><p>เพื่อป้องกันไม่ให้เบราว์เซอร์สนใจยัติภังค์แบบอ่อน เราใส่เครื่องหมายยัติภังค์: none;  ...</p><p>หากจำเป็นต้องมีการตัดคำ แสดงว่า word-wrap: break-word;  ฉันแนะนำให้คุณใช้มันเสมอเนื่องจากเบราว์เซอร์ทั้งหมดเข้าใจ  มันแตกต่างจากการแบ่งคำ: ทำลายทั้งหมด;  ซึ่งมีความสำคัญเหนือกว่าในคำที่ไม่พอดีกับบล็อกเริ่มต้นในบรรทัดใหม่และเคารพคำแนะนำยัติภังค์</p><p>เมื่อใช้ร่วมกัน คำว่า break-all;  ด้วยยัติภังค์: อัตโนมัติ;  , หลังจะถูกละเว้น.  ยัติภังค์: อัตโนมัติ;  ใส่ยัติภังค์ตามที่เห็นสมควร  แต่เพื่อให้ใช้งานได้ คุณต้องกำหนดภาษาของคุณโดยการระบุแอตทริบิวต์ lang = "ru" ใน div</p><h2>อย่าตัดคำไปเป็นบรรทัดอื่น</h2>
<p>สมมติว่ารายการเมนูหรือปุ่มดูไม่ดีถ้ามันแตกออก  ดังนั้นจึงจำเป็นต้องห้ามไม่ให้แยกกันอยู่  สำหรับสิ่งนี้ คุณสมบัติทั้งหมดข้างต้นควรตั้งค่าเป็นโหมด "เริ่มต้น" และเพิ่มเข้าไป  คลิกและดูรูปหลายเหลี่ยมของเรา</p><h2>ควบคุมการตัดคำสำหรับยัติภังค์: อัตโนมัติ;</h2>
<p>Tetrahydropyranylcyclopentyltetrahydropyridopyridine</p><p>
 <div class="hyphens" lang="ru">เตตระไฮโดรไพรานิลไซโคลเพนทิลเตตระไฮโดรไพริโด <span class="nohyphens">pyridino</span>สูง</div>
<style>
.hyphens {
 -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */
 text-align: justify;
}
.nohyphens {
 white-space: nowrap;
}
</style></p>
<h3>ข้อมูลสั้น</h3>
<h3>เวอร์ชัน CSS</h3>
<table class="cssver"><tr><th>CSS 1</th>
 <th>CSS2</th>
 <th>CSS 2.1</th>
 <th>CSS 3</th>
</tr><tr><td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
 <td class="spec_yes">
</td>
</tr></table><h3>คำอธิบาย</h3>
<p>คุณสมบัติ white-space กำหนดวิธีการแสดงช่องว่างระหว่างคำ  ภายใต้สถานการณ์ปกติ ช่องว่างจำนวนเท่าใดก็ได้ในโค้ด HTML จะปรากฏเป็นช่องว่างหนึ่งบนหน้าเว็บ  ข้อยกเว้นคือแท็ก <pre>ข้อความที่อยู่ในคอนเทนเนอร์นี้จะแสดงพร้อมช่องว่างทั้งหมดตามที่ผู้ใช้จัดรูปแบบไว้  ดังนั้น white-space จึงเลียนแบบการทำงานของแท็ก <pre>แต่ต่างจากนี้ คือ มันไม่เปลี่ยนฟอนต์เป็นโมโนสเปซ</p>
<h3>ไวยากรณ์</h3>
<p>white-space: ปกติ |  นาวแรป |  ก่อน |  พรีไลน์ |  ห่อก่อน |  สืบทอด</p>
<h3>ค่า</h3>ข้อความปกติจะแสดงในหน้าต่างเบราว์เซอร์ตามปกติ ตัวแบ่งบรรทัดจะถูกตั้งค่าโดยอัตโนมัติ  nowrap ช่องว่างจะถูกละเว้น ตัวแบ่งบรรทัดจะถูกละเว้นในโค้ด HTML ข้อความทั้งหมดจะแสดงในบรรทัดเดียว  อย่างไรก็ตามเพิ่มแท็ก <br>ตัดข้อความขึ้นบรรทัดใหม่  ก่อนหน้า ข้อความจะแสดงรวมถึงช่องว่างและยัติภังค์ทั้งหมดตามที่ผู้พัฒนาได้เพิ่มไว้ในโค้ด HTML  หากบรรทัดยาวเกินไปที่จะพอดีกับหน้าต่างเบราว์เซอร์ แถบเลื่อนแนวนอนจะถูกเพิ่มเข้ามา  ช่องว่างก่อนบรรทัดจะไม่ถูกนำมาพิจารณาในข้อความ ข้อความจะถูกตัดไปยังบรรทัดถัดไปโดยอัตโนมัติ หากไม่พอดีกับพื้นที่ที่ระบุ  pre-wrap ช่องว่างและตัวแบ่งทั้งหมดจะถูกเก็บไว้ในข้อความ อย่างไรก็ตาม หากความกว้างของบรรทัดไม่พอดีกับพื้นที่ที่ระบุ ข้อความจะถูกตัดไปยังบรรทัดถัดไปโดยอัตโนมัติ  สืบทอดค่าจากพาเรนต์ <p>ผลกระทบของค่าในข้อความจะแสดงในตาราง  1.</p>
<p>HTML5 CSS2.1 IE Cr Op Sa Fx</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>พื้นที่สีขาว</title>
 <style>
 .example {
 border: 1px dashed #634f36; /* Параметры рамки */
 background: #fffff5; /* Цвет фона */
 font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
 padding: 7px; /* Поля вокруг текста */
 margin: 0 0 1em; /* Отступы */
 white-space: pre; /* Учитываются все пробелы и переносы */
 }
 .exampleTitle {
 border: 1px solid black; /* Параметры рамки */
 border-bottom: none; /* Убираем линию снизу */
 padding: 3px; /* Поля вокруг текста */
 display: inline; /* Отображать как встроенный элемент */
 background: #efecdf; /* Цвет фона */
 font-weight: bold; /* Жирное начертание */
 font-size: 90%; /* Размер шрифта */
 margin: 0; /* Убираем отступы */
 white-space: nowrap; /* Переносов в тексте нет */
 }
 </style>
 </head>
 <body>
 <p class="exampleTitle">ตัวอย่าง</p>
 <p class="example">
 <html>
 <body>
 <b>ทฤษฎีบทสุดท้ายของแฟร์มาต์</b><br>
 <i>NS <sup><small>NS</small></sup>+ Y <sup><small>NS</small></sup>= Z <sup><small>NS</small></sup></i><br>โดยที่ n เป็นจำนวนเต็ม> 2</body>
 </html>
 </p>
 </body>
</html>
</p><p>ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  1.</p>
<p>ข้าว.  1. การใช้คุณสมบัติช่องว่างสีขาว</p>
<h3>แบบจำลองวัตถุ</h3>
<p>document.getElementById ("elementID") .style.whiteSpace</p>
<h3>เบราว์เซอร์</h3>
<p>Internet Explorer สูงสุดและรวมถึง 7.0 ไม่สนับสนุน pre-line, pre-wrap และ inherit  สำหรับ <textarea></p>
<p>Opera ก่อนเวอร์ชัน 9.5 ไม่รองรับค่าพรีบรรทัด  สำหรับ <textarea>ค่าปกติและค่าล่วงหน้าจะทำงานเหมือนก่อนตัดตอน และค่า Nowrap จะทำงานเหมือนค่าพรีบรรทัด</p>
<p>Safari ก่อนหน้า 3.0 และ iOS ไม่รองรับค่า pre-wrap และ pre-line</p>
<p>Firefox จนถึงและรวมถึงเวอร์ชัน 2.0 ไม่สนับสนุนค่า pre-line และ pre-wrap  สำหรับ <textarea>ค่า normal, nowrap และ pre จะถูกตีความว่าเป็นค่า pre-wrap</p>
<p>Vlad Merzhevich</p>
 <p>ไม่เหมือนกับข้อความในการพิมพ์ การใส่ยัติภังค์มักไม่ค่อยถูกใช้บนหน้าเว็บ เนื่องจากเราไม่ได้ผูกติดกับขนาดกระดาษอย่างแน่นหนา  สามารถดูเว็บไซต์ได้บนจอภาพที่แตกต่างกัน มีความละเอียดต่างกัน ในระบบปฏิบัติการและเบราว์เซอร์ที่แตกต่างกัน  ทั้งหมดนี้ทำให้เกิดชุดค่าผสมที่ไม่สามารถคาดเดาได้ว่าข้อความสุดท้ายจะมีลักษณะอย่างไรสำหรับผู้ใช้  ด้วยเหตุนี้ ข้อความจึงมักถูกจัดชิดซ้ายและใส่ยัติภังค์ทั้งคำ  แต่ถึงกระนั้น การใส่ยัติภังค์ก็ยังจำเป็นในบางกรณี ตัวอย่างเช่น เมื่อใช้ศัพท์ทางเคมีหรือศัพท์ทางการแพทย์แบบยาว ในคอลัมน์แคบที่มีความกว้างที่กำหนด เพื่อประโยชน์ด้านสุนทรียศาสตร์  ใน HTML และ CSS มีวิธีเพิ่มยัติภังค์ด้วยตนเองหรือแบบอัตโนมัติไม่มากนัก ดังนั้นฉันจะแสดงรายการทั้งหมด</p>
<h2>การใช้แท็ก <wbr></h2>
<p>แท็ก <wbr>แนะนำใน HTML5 และสร้างการตัดคำหากจำเป็น  ในสถานที่เหล่านั้นซึ่งตามกฎของภาษารัสเซียอนุญาตให้ทำการถ่ายโอนได้ <wbr>(ตัวอย่าง 1).  หากทั้งคำพอดีกับความกว้างที่กำหนด แท็กนี้จะไม่แสดงตัวออกมาในทางใดทางหนึ่ง และเราจะไม่รู้ด้วยซ้ำว่ามีแท็กนี้อยู่  หากคำไม่พอดี เบราว์เซอร์จะอยู่ที่ตำแหน่งของแท็ก <wbr>สร้างการถ่ายโอน</p>
<p>ตัวอย่างที่ 1 แท็ก <wbr></p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>โอน</title>
 <style> </style>
 </head>
 <body>
 <p class="word">หนึ่ง <wbr>ซูปราดิกลาส <wbr>สนิช แองเจลิกา หลังเลิกเรียน เลือกอาชีพธุรกิจ <wbr>การผลิต <wbr>คนขับ <wbr>ใบหน้า</p>
 </body>
</html>
</p><p>ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  1.</p>
<p>ข้าว.  1. ข้อความพร้อมการตัดคำ</p>
<h2>โอนอ่อน</h2>
<p>แอปพลิเคชัน <wbr>มีข้อเสียอย่างร้ายแรง - เป็นไปไม่ได้ที่จะเข้าใจว่ายัติภังค์อยู่ข้างหน้าเราหรือคำที่แยกจากกันในบรรทัดอื่น  ด้วยเหตุนี้ความหมายของประโยคจึงอาจสูญหายและเข้าใจผิดได้  การใส่ยัติภังค์ควรทำตามกฎของตัวพิมพ์ กล่าวคือ เพิ่มยัติภังค์ที่ท้ายบรรทัด  การใส่ยัติภังค์แบบซอฟต์ทำได้ดีมากในเรื่องนี้ มีสัญลักษณ์พิเศษอยู่ในโค้ด HTML -  มันทำหน้าที่เหมือนกับแท็ก <wbr>- ไม่ปรากฏให้เห็นในข้อความปกติและตัดคำไปยังอีกบรรทัดหนึ่ง ขณะที่เพิ่มยัติภังค์ (ตัวอย่าง 2)</p>
<p>ตัวอย่างที่ 2 ซอฟท์พกพา</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>โอน</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">หนึ่งสิบเอ็ดคลาส-snitsa Angelica หลังจากจบการศึกษาจากโรงเรียนเลือกอาชีพของนักธุรกิจผู้ผลิตไดรเวอร์</p>
 </body>
</html>
</p><p>ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  2. สังเกตว่าข้อความมีความสวยงามและเข้าใจได้ง่ายเพียงใดเมื่อเปรียบเทียบกับรูปที่  1.</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/blog/break_2.png' height="169" width="182" loading=lazy loading=lazy></p>
<p>ข้าว.  2. ข้อความพร้อมการตัดคำ</p>
<h2>คุณสมบัติแบ่งคำ</h2>
<p>หากต้องการทำให้กระบวนการสร้างยัติภังค์เป็นอัตโนมัติ ให้ใช้คุณสมบัติตัวแบ่งคำที่มีค่าตัวแบ่งทั้งหมด (ตัวอย่าง 3)  ไม่จำเป็นต้องเพิ่มสัญลักษณ์หรือแท็กใดๆ ลงใน HTML ทุกอย่างถูกครอบงำโดยสไตล์</p>
<p>ตัวอย่างที่ 3 การใช้ตัวแบ่งคำ</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>โอน</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 word-break: break-all;
 }
 </style>
 </head>
 <body>
 <p class="word">แองเจลิกาเกรดสิบเอ็ดหลังจากจบการศึกษาจากโรงเรียนเลือกอาชีพเสมียน</p>
 </body>
</html>
</p><p>ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  3. ในกรณีนี้ กฎของการใส่ยัติภังค์จะไม่นำมาพิจารณา จึงสามารถใส่ยัติภังค์คำต่างๆ ในลักษณะที่แปลกประหลาดได้</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/blog/break_3.png' height="148" width="182" loading=lazy loading=lazy></p>
<p>ข้าว.  3. ข้อความพร้อมการตัดคำ</p>
<p>จากวิธีการที่ระบุไว้ทั้งหมด "กึ่งคู่มือ" โดยใช้ - ให้ผลลัพธ์ที่ดีที่สุด - มีการสังเกตกฎของภาษารัสเซียข้อความดูน่าพึงพอใจที่สุด  ใช้เมื่อมีคำยาวในข้อความ</p>
<h2>คุณสมบัติยัติภังค์</h2>
<p>และสุดท้าย คุณสมบัติที่มีประสิทธิภาพและสะดวกที่สุดสำหรับการเพิ่มยัติภังค์โดยอัตโนมัติคือยัติภังค์  การดำเนินการจะขึ้นอยู่กับพจนานุกรมการใส่ยัติภังค์ในตัวของเบราว์เซอร์ ดังนั้นจึงให้ผลลัพธ์ที่ดีที่สุด  รองรับใน IE10, Firefox, Android และ iOS  Chrome และ Opera ไม่รองรับ  เพื่อให้มันใช้งานได้ทั้งหมดสำหรับแท็ก <html>เพิ่มแอตทริบิวต์ lang ด้วยค่า ru (ตัวอย่าง 4)</p>
<p>ตัวอย่างที่ 4 การใช้ยัติภังค์</p><p>
 <!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>โอน</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 }
 </style>
 </head>
 <body>
 <p class="word">แองเจลิกาเกรดสิบเอ็ดหลังจากจบการศึกษาจากโรงเรียนเลือกอาชีพเสมียน</p>
 </body>
</html>
</p><p>ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่  4.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/blog/break_4.png' height="146" width="182" loading=lazy loading=lazy></p>
<p>ข้าว.  4. ข้อความพร้อมการตัดคำ</p>
<h2>ป้องกันการใส่ยัติภังค์</h2>
<p>บ่อยครั้งที่ปัญหาผกผันก็เกิดขึ้น - เพื่อห้ามยัติภังค์ในสถานที่เหล่านั้นซึ่งตามกฎของภาษานั้นไม่เป็นที่ยอมรับ  ตัวอย่างเช่น คุณไม่สามารถแยกหน่วยการวัดออกจากตัวเลข (10 มล.), การกำหนดปี (54 ปีก่อนคริสตกาล), ชื่อย่อจากนามสกุล, ตัวย่อแบบต่อเนื่อง (ฯลฯ ) เป็นต้น เพื่อให้เบราว์เซอร์ไม่ เพิ่มยัติภังค์ในช่องว่าง ควรแทนที่ด้วยช่องว่างที่ไม่แตก (ตัวอย่าง 5)</p>
<p>ตัวอย่างที่ 5. การใช้งาน</p><p>
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>โอน</title>
 <style>
 .word {
 width: 160px;
 background: #f0f0f0;
 border: 1px solid #333;
 padding: 10px;
 font-size: 18px;
 }
 </style>
 </head>
 <body>
 <p class="word">ทะเลสาบที่พิกัด 70 ° 58 ′ 19″ s.  NS.  97 ° 24 ′ 5″ อี  หมู่บ้านตั้งอยู่ในเขต Taimyr Dolgano-Nenets ของดินแดน Krasnoyarsk ของรัสเซีย</p>
 </body>
</html>
</p><p>ในตัวอย่างนี้ สำหรับการสะกดพิกัดที่ถูกต้อง จะใช้ไม่อนุญาตให้ตัดข้อความ</p>
<p>สวัสดีทุกคน).  ฉันยังคงเขียนเกี่ยวกับคุณสมบัติที่มีประโยชน์ต่างๆ ของภาษา css ที่สามารถช่วยในการจัดวาง  และวันนี้ฉันอยากจะบอกคุณถึงวิธีการห่อคำใน css หากคำเหล่านั้นไม่พอดีกับคอนเทนเนอร์ของคุณ  ฉันจะแสดงให้คุณเห็นทุกอย่างด้วยตัวอย่างที่แท้จริง</p>
 <h2>เปิดการใส่ยัติภังค์สำหรับคำที่ไม่เหมาะสม</h2>
 <p>สมมติว่าฉันมีบล็อกกว้าง 100 พิกเซล และฉันต้องเขียนข้อความลงไป  ข้อความมีคำว่า “ <i>สกัดตัวเอง</i>".  นี่คือที่เก็บถาวรเช่น) แต่ไม่ใช่ประเด็น  คำนี้ยาวมาก ไม่พอดีกับความกว้างของภาชนะ  ลองเขียนมันในบล็อกแคบ ๆ (100 พิกเซล)  อะไรจะเกิดขึ้น?</p><p>อย่างที่คุณเห็น คำพูดแย่ๆ เล็ดลอดออกมาจากภาชนะ เขาไม่มีที่ไป คุณจะทำอย่างไร  และนี่คือโดยไม่มีการเยื้อง  ดังนั้นคุณสมบัติ word-wrap จึงเข้ามาช่วย  นี่คือสิ่งที่คุณต้องขอให้บล็อกเพื่อเปิดใช้งานการตัดคำในนั้น:</p>
 <p>Word-wrap: แบ่งคำ;</p>
 <p>และเพื่อความโน้มน้าวใจ คุณสามารถเพิ่มช่องว่างภายในได้  ดังนั้นหลังจากใช้คุณสมบัติแล้วเราจะเห็นว่าคำที่ยาวเกินไปจะตัดคำทีละตัวอักษรไปยังอีกบรรทัดหนึ่ง  ยิ่งกว่านั้นแม้ว่าบรรทัดที่สองจะไม่เพียงพอสำหรับคำ แต่ส่วนที่เหลือจะถูกโอนไปยังบรรทัดที่สาม ฯลฯ <br><br>ฉันอยากจะชี้ให้เห็นว่าทรัพย์สินสามารถใช้ได้อย่างปลอดภัย  อย่างแรกเลย มันใช้งานได้ดีในเบราว์เซอร์ในปัจจุบัน  ประการที่สอง มันทำงานอย่างชาญฉลาด  กล่าวคือ สำหรับคำปกติทั้งหมดจะไม่มียัติภังค์ คำทั้งคำจะถูกโอนไปยังบรรทัดถัดไป ดังนั้นความสามารถในการอ่านจะไม่ลดลง  คุณสามารถดูได้ในภาพหน้าจอนี้</p>
 <h2>เมื่อใดควรใช้ word-wrap</h2>
 <p>จริงๆ แล้ว จนถึงตอนนี้ ฉันเห็นกรณีการใช้งาน 2 กรณี  อย่างแรกมีไว้สำหรับบล็อกแคบ ๆ ที่คุณกลัวว่าคำพูดยาว ๆ อาจคืบคลานออกมาจากบล็อกอย่างน่าเกลียด  ประการที่สองคือเมื่อนักออกแบบคิดเพื่อให้ชื่อของไซต์ควรอยู่ในหลายบรรทัด</p>
 <p>ดังนั้น ในบทความนี้ เราได้เรียนรู้วิธีตัดคำใน css  นั่นคือทั้งหมดสำหรับฉันวันนี้  พบกันใหม่.</p>

<br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+
	escape(document.referrer)+((typeof(screen)=="undefined")?"":
	";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
	screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
	";"+Math.random()+
	"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
			</article>

			

			<div class="post-bottom">

				<div class="post-share">
					<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
					<script src="//yastatic.net/share2/share.js"></script>
					<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir" data-counter=""></div>
				</div>

				

			</div>

	

			<div class='yarpp-related'>
	<div class="related-items">

		<div class="headline">ไม่พบคำตอบสำหรับคำถามของคุณ?  ดูที่นี่</div>

	
		<div class="items">
					


        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/th/kak-otklyuchit-uslugu-vam-zvonili-na-mts-i-est-li-v-nei-neobhodimost-kak.html"><img src="/uploads/2627b7a8c6e8f3683803e58e616fc11f.jpg" width="120" height="120" alt="จะปิดการใช้งานบริการ "คุณได้รับสาย" จาก MTS ได้อย่างไร?" class="related-item__image" / loading=lazy loading=lazy>จะปิดการใช้งานบริการ "คุณได้รับสาย" จาก MTS ได้อย่างไร?</a>
        <div class="related-item__comments"><span></span></div>
    </div>



					
        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/th/chto-budet-esli-na-aifone-postavit-sbros-nastroek-i-polnyi-sbros-apple-iphone.html"><img src="/uploads/c1ba0e185198eb73636e1ec8065367f6.jpg" width="120" height="120" alt="รีเซ็ตเป็นค่าจากโรงงานและฮาร์ดรีเซ็ต Apple iPhone" class="related-item__image" / loading=lazy loading=lazy>รีเซ็ตเป็นค่าจากโรงงานและฮาร์ดรีเซ็ต Apple iPhone</a>
        <div class="related-item__comments"><span></span></div>
    </div>

					
        <div class="related-item">
        <a class="related-item__title" href="https://appcube.ru/th/chto-budet-esli-postavit-datu-sbros-nastroek-i-polnyi-sbros-apple-iphone-sozdanie.html"><img src="/uploads/365faffe00b02c6315b51f32c538bd3f.jpg" width="120" height="120" alt="รีเซ็ตเป็นค่าจากโรงงานและฮาร์ดรีเซ็ต Apple iPhone" class="related-item__image" / loading=lazy loading=lazy>รีเซ็ตเป็นค่าจากโรงงานและฮาร์ดรีเซ็ต Apple iPhone</a>
        <div class="related-item__comments"><span></span></div>
    </div>

				</div>

	
	</div>
</div>
			
		<div style="text-align: center; margin-top: 15px; margin-bottom: 15px; " id="vanna-1965575812"><div class="adsense"><script type="text/javascript">ga_1();</script></div></div>
			



	
	

	

			
		</main>

		

<aside class="sidebar">



						


        
        <div class="advices" data-theme="vannapedia_v.3">
        <div class="headline"></div>
        <div class="advices-content">
            <img src="/uploads/07dd64f155af27e992653de95f7f23aa.jpg" width="120" height="120" alt="เวอร์ชั่นล่าสุดของโทรศัพท์ sony" class="advices__image" / loading=lazy loading=lazy>
            <div class="advices__title" data-id="3334"><a href="https://appcube.ru/th/poslednyaya-versiya-telefona-sony-telefony-soni-chem-horoshi-telefony-sony.html">เวอร์ชั่นล่าสุดของโทรศัพท์ sony</a></div>
        </div>

    </div>




	
			<div class="vk-widget" id="text-3">			<div class="textwidget"><script type="text/javascript" src="//vk.com/js/api/openapi.js?130"></script>


<div id="vk_groups"></div>
</div>
		</div>
				<div class="sidebar-questions">
		<div class="headline">ใหม่</div>
		<ul>
        <li><a href="https://appcube.ru/th/kto-udalil-menya-iz-druzei-vkontakte-chto-delat-esli-vkontakte-ischezli.html" >จะทำอย่างไรถ้าเพื่อนหายไปใน VKontakte เพื่อนคนไหนที่หายไปพร้อมกับผู้ติดต่อ</a></li>
        <li><a href="https://appcube.ru/th/zaiti-v-lichnyi-kabinet-zhivaya-klassika-lichnyi-kabinet-zhivaya-klassika.html" >บัญชีส่วนตัว ถ่ายทอดสดคลาสสิก - การแข่งขันการอ่าน</a></li>
        <li><a href="https://appcube.ru/th/chto-delat-esli-vkontakte-ischezli-druzya-uznaem-kto-udalilsya-iz-druzei.html" >เราจะหาว่าใครทิ้งเพื่อน VKontakte เพื่อนคนไหนที่หายไปพร้อมกับผู้ติดต่อ</a></li>
        <li><a href="https://appcube.ru/th/kakoi-operator-luchshe-dlya-interneta-i-zvonkov-kakie-luchshie-sotovye-operatory.html" >ผู้ให้บริการมือถือที่ดีที่สุดในรัสเซียคืออะไร?</a></li>
        <li><a href="https://appcube.ru/th/perenosnye-magnitofony-sssr-mif-o-sovetskoi-elektronike-kassetnyi.html" >ตำนานอิเล็กทรอนิกส์ของสหภาพโซเวียต</a></li>
        <li><a href="https://appcube.ru/th/pochemu-ne-zakroyut-vkontakte-kak-skryt-stranicu-vkontakte.html" >วิธีซ่อนหน้า VKontakte ผู้ติดต่อจะถูกลบในวันที่ 31 พฤษภาคม</a></li>
</ul>
		
	</div>

							<div class="section">
    <div id="macire1" style="height:500px;width:240px;" align="center"></div>
</div>
		
							<div class="section">
				<div class="headline">บทความยอดนิยม</div>
				<ul class="sidebar-posts">
    <li><a href="https://appcube.ru/th/chistka-macbook-ot-pyli-na-domu-ya-chistil-pyl-vnutri-macbook-pro-chto-iz.html"><img src="/uploads/7cf63cf69722426fb5fbb81eacf42aad.jpg" width="80" height="80" alt="ฉันกำลังทำความสะอาดฝุ่นภายใน MacBook Pro" / loading=lazy loading=lazy>ฉันกำลังทำความสะอาดฝุ่นภายใน MacBook Pro</a></li>
    <li><a href="https://appcube.ru/th/obzor-xiaomi-mi6-novyi-ubiica-flagmanov-ubiica-aifona-za-pyat-tysyach-rublei.html"><img src="/uploads/af131041859dd180ebfb207310c52619.jpg" width="80" height="80" alt="รีวิว Xiaomi Mi6  นักฆ่าเรือธงคนใหม่?"Убийца айфона” за пять тысяч рублей Давайте честно - это не iPhone" / loading=lazy loading=lazy>รีวิว Xiaomi Mi6  นักฆ่าเรือธงคนใหม่?  "นักฆ่าไอโฟน" ในราคาห้าพันรูเบิล บอกตามตรง นี่ไม่ใช่ไอโฟน</a></li>
    <li><a href="https://appcube.ru/th/otdyh-detei-i-vzroslyh-na-more-otdyh-s-detmi-na-more-planirovanie-otdyha-s.html"><img src="/uploads/8f63c975d94a08e4c1915070c0aabdbd.jpg" width="80" height="80" alt="พักผ่อนสำหรับเด็กและผู้ใหญ่ในทะเล" / loading=lazy loading=lazy>พักผ่อนสำหรับเด็กและผู้ใหญ่ในทะเล</a></li>
</ul>
			</div>
		
							<div class="section">
				<div class="headline">ใหม่บนเว็บไซต์</div>
				<ul class="sidebar-posts  sidebar-photo">
    <li><a href="https://appcube.ru/th/otdyh-s-detmi-0-gde-v-rossii-otdohnut-s-detmi-na-more-i-ne-razoritsya.html">ที่ไหนในรัสเซียที่จะพักผ่อนกับเด็ก ๆ ที่ทะเลและไม่ยากจน</a></li>
    <li><a href="https://appcube.ru/th/putevki-na-more-dlya-semi-otdyh-s-detmi-nashi-laifkahi-poezdok-s-rzhd.html">เที่ยวทะเลทั้งครอบครัว</a></li>
    <li><a href="https://appcube.ru/th/samyi-bystryi-mobilnyi-internet-operator-u-kogo-mobilnyi-internet.html">ใครมีเน็ตมือถือถูกกว่าบ้าง?</a></li>
    <li><a href="https://appcube.ru/th/samyi-bystryi-mobilnyi-internet-4g-skorostnoi-internet.html">เน็ตมือถือที่เร็วที่สุด 4g</a></li>
    <li><a href="https://appcube.ru/th/vred-fitnes-brasletov-dlya-zdorovya-fitnes-braslet-kak.html">สร้อยข้อมือฟิตเนส: มันทำงานอย่างไรและทำไมคุณถึงต้องการ กำไลฟิตเนส - ประโยชน์หรืออันตราย</a></li>
</ul>
				
			</div>
		
		
		</aside>

	</div>

	

<footer class="footer">

		
				<nav class="footer__nav"><ul><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1219"><a href="https://appcube.ru/th/">ใหม่</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6747"><a href="https://appcube.ru/th/css-perenos-bukv-na-novuyu-stroku-perenosy-slov-vklyuchaem-perenos-dlya-slov.html">Css ห่อตัวอักษรขึ้นบรรทัดใหม่</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6746"><a href="https://appcube.ru/th/taimery-v-javascript-setinterval-settimeout-primery-jquery-funkcii-settimeout.html">ตัวอย่างของฟังก์ชัน jQuery setTimeout () Javascript ป้องกันไม่ให้ตัวจับเวลาหลายตัวเรียกใช้ setinterval ในเวลาเดียวกัน</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6745"><a href="https://appcube.ru/th/samodelnye-ustroistva-upravleniya-dlya-bytovyh-elektropriborov-radiolyubitelskie-shemy-i-samodelki.html">DIY วงจรวิทยุสมัครเล่นและผลิตภัณฑ์ทำเอง</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6744"><a href="https://appcube.ru/th/kak-pri-pomoshchi-css-obrezat-dlinnyi-tekst-obrezka-odno--ili.html">ครอบตัดข้อความที่มีความสูงหนึ่งหรือหลายบรรทัดด้วยการเพิ่มจุดไข่ปลา การเพิ่มการไล่ระดับสีให้กับข้อความ</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1230"><a href="https://appcube.ru/th/">เป็นที่นิยม</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6742"><a href="https://appcube.ru/th/css-selectors-vidy-selektorov-universalnyi-selektor-css-gde-ego-mozhno.html">ตัวเลือก CSS  ประเภทของตัวเลือก  ตัวเลือก CSS ทั่วไปที่คุณสามารถนำไปใช้ได้</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6741"><a href="https://appcube.ru/th/logicheskie-vyrazheniya-i-logicheskie-operacii-bulevy-true-i-false.html">ค่าบูลีน (จริงและเท็จ) ใน Perl ค่าใดที่ถือว่าจริงหรือเท็จใน Perl</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6740"><a href="https://appcube.ru/th/sobytiya-document-javascript-javascript---vidy-sobytii-prikreplyaite-sobytiya-k.html">JavaScript - ประเภทของเหตุการณ์</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6739"><a href="https://appcube.ru/th/kak-sdelat-slozhnyi-obekt-html-vstroennye-funkcii-peretaskivaniya-v-html5.html">ฟังก์ชันลากและวาง HTML5 ในตัว</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6738"><a href="https://appcube.ru/th/kak-stilizovat-standartnyi-teg-audio-bez-js-osvoenie-html5-tega-audio.html">การเรียนรู้แท็กเสียง HTML5</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6737"><a href="https://appcube.ru/th/vyravnivanie-blokov-s-pomoshchyu-css-s-ispolzovaniem-flex-konteinera-vs-chto.html">ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการจัดตำแหน่ง Flexbox รายการ Flex</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6735"><a href="https://appcube.ru/th/css-animaciya-dlya-samyh-malenkih-animaciya-css-primery-i-gotovyi-kod-vidy.html">ตัวอย่างภาพเคลื่อนไหว CSS และโค้ดสำเร็จรูป ประเภทของภาพเคลื่อนไหว css</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6734"><a href="https://appcube.ru/th/ustanovka-iis-na-windows-server-ustanovka-i-konfigurirovanie-iis-iis-ustanovka-i.html">การติดตั้งและการกำหนดค่า IIS Iis การติดตั้งและการกำหนดค่า</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1236"><a href="https://appcube.ru/th/">ที่แนะนำ</a>
<ul class="sub-menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6733"><a href="https://appcube.ru/th/dvoinoi-background-kak-sdelat-neskolko-fonovyh-izobrazhenii-css-primer.html">วิธีสร้างภาพพื้นหลัง CSS หลายภาพ</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6732"><a href="https://appcube.ru/th/chto-takoe-target-v-css-sobytie-click-na-chistom-css-bez-target-kak-sdelat.html">เหตุการณ์การคลิก CSS ล้วนๆ โดยไม่มี: target</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6731"><a href="https://appcube.ru/th/sobytie-click-na-chistom-css-bez-target-target-blank-i-drugie-znacheniya-atributa.html">Target = "_blank" และค่าอื่นๆ ของแอตทริบิวต์เป้าหมาย</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6730"><a href="https://appcube.ru/th/element-prozrachnyi-css-prozrachnost---kross-brauzernoe-reshenie.html">ความโปร่งใสของ CSS เป็นโซลูชันข้ามเบราว์เซอร์</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6728"><a href="https://appcube.ru/th/versiya-dlya-pechati-html-razryv-stranicy-razryv-stranicy-dlya.html">ตัวแบ่งหน้าสำหรับการพิมพ์โดยใช้ CSS3</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6726"><a href="https://appcube.ru/th/jquery-modalnoe-okno-s-razmytym-fonom-sozda-m-vsplyvayushchee-modalnoe-okno-jquery.html">วิธีสร้างโมดอลป๊อปอัป jQuery</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6723"><a href="https://appcube.ru/th/nastroika-vpn-soedineniya-v-linux-nastroika-vpn-podklyucheniya-v-linux.html">การกำหนดค่าการเชื่อมต่อ VPN ใน Linux Tutorial สำหรับการกำหนดค่าเซิร์ฟเวอร์ VPN บน ubuntu</a></li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6722"><a href="https://appcube.ru/th/upravlyaemaya-raspredelennaya-arhitektura-arhitektura-raspredelennoi-sistemy-upravleniya-na-osnove-reko.html">สถาปัตยกรรมของระบบควบคุมแบบกระจายตามสภาพแวดล้อมการคำนวณแบบหลายไปป์ไลน์ที่กำหนดค่าใหม่ได้ ระบบไฟล์แบบกระจาย "โปร่งใส" L-Net</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6898"><a href="https://appcube.ru/th/">เกี่ยวกับเว็บไซต์</a>
<ul  class="sub-menu">
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6900"><a href="">เกี่ยวกับเว็บไซต์</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6901"><a href="">ลงโฆษณาบนเว็บไซต์</a></li>
	<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6902"><a href="">ติดต่อ</a></li>
	
</ul>
</li>
</ul></nav>
			

   

		<div class="footer-bottom">

			<div class="footer-left">

    <div class="foot__logo">
        <div class="footer__logo-sitename">appcube.ru <span>รู</span></div>
    </div>
  <style>
    .foot__logo {
    min-height: 35px;
    margin: 0 0 11px -79px;
    padding: 9px 0 0 79px;
    text-decoration: none;
}
  </style>

    <p>© 2021 สงวนลิขสิทธิ์</p>
    <p>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</p>

    <ul class="footer-bottom__nav">
        <li><a href="" >โฆษณาในโครงการ</a></li>
    </ul>

</div>

			<div class="footer-buttons">

</div>


					<ul class="footer__soc">
											<li><a href="http://vk.com/"  target="_blank" class="vk">ติดต่อกับ</a></li>
															<li>เพื่อนร่วมชั้น</li>
															<li><a href="http://www.facebook.com/"  target="_blank" class="fb">เฟสบุ๊ค</a></li>
															<li><a href="https://twitter.com/"  target="_blank" class="twi">ทวิตเตอร์</a></li>
										</ul>
		
			<div class="footer-right">

				<div class="footer__note"></div>

				<div class="footer__counters" id="text-2">			<div class="textwidget"></div>
		</div>
			</div>

		</div>

	</footer>



</div>
</div>
<link rel='stylesheet' id='wp-lightbox-bank.css-css'  href='/wp-content/plugins/wp-lightbox-bank/assets/css/wp-lightbox-bank.css?ver=4.8.3' type='text/css' media='all' />
<script type='text/javascript' src='https://appcube.ru/wp-content/themes/vannapedia_v.3/js/scripts.js'></script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script>

<script type='text/javascript' src='/assets/scripts1.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "smooth_scroll":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-fixed", "margin_top" : 10, "margin_bottom" : 0, "stop_id" : "respond", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-4'] } ;
</script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/wp-lightbox-bank/assets/js/wp-lightbox-bank.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://appcube.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0'></script>
</body>
</html>