โดย pprn » 11/07/2018 4:02 pm
- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
- โดยบทความนี้จะอธิบายเกี่ยวกับ CSS Text Overflow (การแสดงข้อความแบบตัดคำ) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า This is some long text that
will not fit in the box แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น
- รูปแบบโค้ดแบบที่ 1 เป็นการตัดคำเลย
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>
</body>
</html>
- c1.JPG (15.07 KiB) Viewed 5852 times
- รูปแบบโค้ดแบบที่ 2 เป็นการตัดคำให้รู้ว่ามีต่อ (มี ....)
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>
</body>
</html>
- c2.JPG (15.16 KiB) Viewed 5852 times
- รูปแบบโค้ดแบบที่ 3 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>
- c3.png (3.11 KiB) Viewed 5852 times
- รูปแบบโค้ดแบบที่ 4 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้ (มี...)
- เป็นการตัดคำเลย ก่อนตัดจะมี ... ต่อท้ายข้อความ สามารถใช้เมาส์ชี้และแสดงข้อความได้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
</body>
</html>
- c3.png (3.11 KiB) Viewed 5852 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 Text Overflow (การแสดงข้อความแบบตัดคำ) ยกตัวอย่างโค้ดดังนี้ ต้องแสดงข้อความว่า This is some long text that [/list]
will not fit in the box แต่ต้องการตัดคำให้มีขนาดแค่ตามต้องการเท่านั้น
[b][list][color=#0000BF][size=110]รูปแบบโค้ดแบบที่ 1 เป็นการตัดคำเลย[/size][/color][/list][/b]
[list][code]<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>
</body>
</html>[/code][/list]
[color=#FF0000][list][b][size=110]ผลลัพธ์แบบที่ 1[/size][/b][/list][/color]
[list][attachment=3]c1.JPG[/attachment][/list]
[b][list][color=#0000BF][size=110]รูปแบบโค้ดแบบที่ 2 เป็นการตัดคำให้รู้ว่ามีต่อ (มี ....) [/size][/color][/list][/b]
[list][code]<!DOCTYPE html>
<html>
<head>
<style>
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>
</body>
</html>[/code][/list]
[color=#FF0000][list][b][size=110]ผลลัพธ์แบบที่ 2[/size][/b][/list][/color]
[list][attachment=2]c2.JPG[/attachment][/list]
[b][list][color=#0000BF][size=110]รูปแบบโค้ดแบบที่ 3 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้[/size][/color][/list][/b]
[list][code]<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>[/code][/list]
[color=#FF0000][list][b][size=110]ผลลัพธ์แบบที่ 3[/size][/b][/list][/color]
[list][attachment=1]c3.png[/attachment][/list]
[b][list][color=#0000BF][size=110]รูปแบบโค้ดแบบที่ 4 เป็นการตัดคำเลยแต่สามารถใช้เมาส์ชี้และแสดงข้อความได้ (มี...) [/size][/color][/list][/b]
[list]เป็นการตัดคำเลย ก่อนตัดจะมี ... ต่อท้ายข้อความ สามารถใช้เมาส์ชี้และแสดงข้อความได้ [/list]
[list][code]<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
</body>
</html>[/code][/list]
[color=#FF0000][list][b][size=110]ผลลัพธ์แบบที่ 4[/size][/b][/list][/color]
[list][attachment=0]c3.png[/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]