เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

โพสต์แล้ว: **11/07/2018 4:23 pm**

CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ

หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ

โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Word Wrap (การแสดงขึ้นบรรทัดใหม่ตามความยาวที่กำหนด) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น

หากคำยาวเกินไปที่จะพอดีภายในพื้นที่จะขยายออกไปด้านนอก: ดังนี้

w1.JPG (23.13 KiB) Viewed 13924 times

ดังนั้นเราจึงต้องเก็บการให้ข้อความอยู่ในพื้นที่ๆ กำหนดเท่านั้น

รูปแบบโค้ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
}
</style>
</head>
<body>

<p class="test"> Edit_text</p>

</body>
</html>

อธิบายโค้ด
- - width: 11em; คือ ความกว้างที่กำหนด
  - border:1px solid คือ การกำหนดให้มีขอบ
  - #000000 คือ สีของกรอบในที่นี้คือสีดำ

ตัวอย่าง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 11em; 
    border: 1px solid #000000;
    word-wrap: break-word;
}
</style>
</head>
<body>

<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

ผลลัพธ์

w2.JPG (20.61 KiB) Viewed 13924 times

----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Tip CSS : CSS Word Wrap (การแสดงขึ้นบรรทัดใหม่ตามความยาวที่กำหนด)

Tip CSS : CSS Word Wrap (การแสดงขึ้นบรรทัดใหม่ตามความยาวที่กำหนด)