โดย pprn » 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 13950 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 13950 times
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------
[list][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]CSS[/url] ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ [/list] หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
[list]โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Word Wrap (การแสดงขึ้นบรรทัดใหม่ตามความยาวที่กำหนด) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า[/list] This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น
[list]หากคำยาวเกินไปที่จะพอดีภายในพื้นที่จะขยายออกไปด้านนอก: ดังนี้
[attachment=1]w1.JPG[/attachment][/list]
[list]ดังนั้นเราจึงต้องเก็บการให้ข้อความอยู่ในพื้นที่ๆ กำหนดเท่านั้น[/list]
[size=150][b][color=#0000BF]รูปแบบโค้ด[/color][/b][/size]
[list][code]<!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>[/code][/list]
[list][u]อธิบายโค้ด[/u]
[list]- width: 11em; คือ ความกว้างที่กำหนด
- border:1px solid คือ การกำหนดให้มีขอบ
- #000000 คือ สีของกรอบในที่นี้คือสีดำ
[/list][/list]
[size=150][b][color=#0000BF]ตัวอย่าง[/color][/b][/size]
[list][code]<!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>[/code][/list]
[color=#FF0000][list][b][size=110]ผลลัพธ์[/size][/b][/list][/color]
[list][attachment=0]w2.JPG[/attachment][/list]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]
[color=#FF00BF][i]_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] , [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url] โดยสามารถศึกษาได้จากบทเรียน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2127-php-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]PHP[/url] ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________[/color][/i]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]