สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
การใช้ White-space Property ใน CSS อย่างมีประสิทธิภาพ
ในยุคปัจจุบันที่เทคโนโลยีสารสนเทศเข้ามามีบทบาทสำคัญในชีวิตประจำวันของพวกเรา การสร้างหน้าเว็บที่สวยงามและใช้งานได้อย่างราบรื่นกลายเป็นสิ่งสำคัญ หนึ่งในเครื่องมือที่นักพัฒนาซอฟต์แวร์ใช้ในการดีไซน์รูปแบบและการแสดงผลของหน้าเว็บคือ CSS (Cascading Style Sheets) ซึ่งมีคุณสมบัติมากมายในการจัดการกับลักษณะต่างๆ ของข้อความ หนึ่งในคุณสมบัติที่มีความน่าสนใจและสามารถสร้างความแตกต่างให้กับหน้าเว็บของคุณได้คือ "White-space Property" หรือคุณสมบัติพื้นที่ว่าง
ในบทความนี้ เราจะมาเรียนรู้เกี่ยวกับ White-space Property ใน CSS ว่ามันคืออะไร มีการทำงานอย่างไร และสามารถนำไปใช้ในกรณีใดบ้าง เพื่อให้คุณสามารถนำความรู้ที่ได้ไปประยุกต์ใช้ในการพัฒนาเว็บไซต์ที่โดดเด่นและมีเอกลักษณ์
คุณสมบัติ White-space ใน CSS ใช้เพื่อควบคุมวิธีการจัดการพื้นที่ว่าง (Whitespace) ในข้อความ ประกอบด้วยช่องว่าง (spaces), ตัวแท็บ (tabs) และการขึ้นบรรทัดใหม่ (newline) ปกติแล้ว เบราว์เซอร์จะละเลยพื้นที่ว่างหลายๆ ที่ที่ต่อเนื่องกันใน HTML และจะแสดงเป็นช่องว่างเดียว ซึ่งเป็นพฤติกรรมเริ่มต้นของเบราว์เซอร์ทั่วไป แต่ด้วยการปรับแต่ง White-space Property คุณสามารถเปลี่ยนแปลงพฤติกรรมเหล่านี้ได้
ต่อไปนี้คือค่าต่างๆ ที่คุณสามารถใช้เพื่อกำหนด White-space Property ใน CSS:
1. normal: ค่าเริ่มต้นที่เบราว์เซอร์ใช้โดยช่องว่างและการขึ้นบรรทัดใหม่จะถูกละเว้นและแสดงผลเป็นช่องว่างเดียว 2. nowrap: ยกเลิกการขึ้นบรรทัดโดยอัตโนมัติ เนื้อหาทั้งหมดจะแสดงในบรรทัดเดียวและจะต้องใช้ scrollbar หากเนื้อหายาวเกินขนาดองค์ประกอบ 3. pre: รักษาพื้นที่ว่างทั้งหมดรวมถึงการขึ้นบรรทัดใหม่ ซึ่งทำงานคล้ายกับแท็ก `<pre>` ใน HTML 4. pre-wrap: รักษาพื้นที่ว่างและการขึ้นบรรทัดใหม่ แต่จะขึ้นบรรทัดใหม่โดยอัตโนมัติหากเนื้อหายาวเกินขนาดองค์ประกอบ 5. pre-line: ละการตกแต่งขอบแบบที่ไม่จำเป็น (เช่น การขึ้นบรรทัดใหม่ที่มีมากเกินไป) แต่ยังคงขึ้นบรรทัดใหม่อัตโนมัติ
ตัวอย่างการใช้ White-space Property ที่พบได้บ่อยคือในงานดีไซน์ของฟอร์แมตคำบรรยาย (Text) บางครั้งเราต้องการให้โฆษณา การรายงาน หรือข้อความคำบรรยายแสดงในลักษณะเฉพาะที่คงความสมบูรณ์ คุณสมบัตินี้ช่วยให้มั่นใจได้ว่าจะไม่มีการเปลี่ยนแปลงการจัดรูปแบบโดยไม่ได้ตั้งใจ
ต่อไปนี้คือตัวอย่างโค้ด CSS ที่ใช้ White-space Property:
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่าง White-space Property</title>
<style>
.normal {
white-space: normal;
border: 1px solid #000;
padding: 10px;
}
.nowrap {
white-space: nowrap;
border: 1px solid #000;
padding: 10px;
}
.pre {
white-space: pre;
border: 1px solid #000;
padding: 10px;
}
.pre-wrap {
white-space: pre-wrap;
border: 1px solid #000;
padding: 10px;
}
.pre-line {
white-space: pre-line;
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</div>
<div class="nowrap">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</div>
<div class="pre">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</div>
<div class="pre-wrap">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</div>
<div class="pre-line">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</div>
</body>
</html>
ในตัวอย่างนี้ คุณจะเห็นว่าแต่ละค่าให้ผลลัพธ์การแสดงผลที่แตกต่างกัน แม้จะใช้เนื้อหาเดียวกัน เพราะ White-space Property ได้มีบทบาทจัดการพื้นที่ว่างในรูปแบบต่างๆ
White-space Property เป็นอีกหนึ่งเครื่องมือทรงพลังที่นักพัฒนาเว็บไซต์สามารถใช้ในการควบคุมการแสดงผลพื้นที่ว่างภายในข้อความ ทำให้สามารถสร้างการแสดงผลที่ตรงกับความต้องการและเพิ่มความสวยงามและความชัดเจนในการสื่อสารผ่านเว็บ นี่เป็นความรู้เพียงบางส่วนของสิ่งที่คุณจะได้เรียนรู้หากคุณสนใจศึกษาหรือพัฒนาเส้นทางอาชีพด้านโปรแกรมมิ่ง ณ ที่นี้อาจพิจารณา EPT (Expert-Programming-Tutor) ซึ่งเป็นสถาบันที่มั่นในด้านการพัฒนาโปรแกรมอย่างมีประสิทธิภาพและนวัตกรรม
อย่ารอช้าที่จะนำ White-space Property ไปลองปรับใช้และพบประสบการณ์ใหม่ๆ ในการพัฒนาเว็บไซต์ของคุณ!
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com