จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word
03 April 2011การจัดตัวอักษรที่เป็นข้อความต่อเนื่องยาวติดกัน ในกรณีแสดงใน
พื้นที่ที่กำหนดขอบเขตการแสดง จะเจอกับปัญหา ข้อความล้นออก
นอกกรอบ ที่ต้องการ ดูตัวอย่าง ประกอบ
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
css สำหรับใช้กำหนด ให้ข้อความแสดงในกรอบ ตามรูปที่ 2
word-wrap:break-word;
ตัวอย่างโค้ดทดสอบทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div#mylayout_1{
display:block;
width:100px;
border:1px solid #09C;
background-color:#FCC;
}
div#mylayout_2{
display:block;
width:100px;
border:1px solid #09C;
background-color:#CFC;
word-wrap:break-word;
}
</style>
</head>
<body>
<div id="mylayout_1">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
<br />
<br />
<div id="mylayout_2">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4650 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10432 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 1504 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2537 26 Jan 12 แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่าย อ่าน 553 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2772 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 1590 08 Feb 11 แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery อ่าน 4116 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2450 17 Dec 10 สร้าง php ฟังก์ชัน ตราจสอบ ก่อนถึงวันหมดอายุ อย่างง่าย อ่าน 1907 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17951 25 Sep 08 ทบทวนคำสั่ง sql อ่าน 9303 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 9078 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 10425 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3495 22 Jan 11 การอัพเดท สถานะ facebook อัตโนมัติ ผ่านทางอีเมลล์ อ่าน 1987 10 Sep 10 ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่ อ่าน 5944