ตัดอักขระยาวๆ เช่น URL และที่อยู่อีเมล

กำหนดให้อักขระยาวตัดคำโดยอัตโนมัติ (เช่น URL และที่อยู่อีเมล) วัตถุประสงค์: ทำให้สตริงยาวมากตัดโดยอัตโนมัติ แต่อย่าแยกคำสั้น ๆ ที่อยู่ตรงกลาง

มีวิธีดังนี้:

<สไตล์>    div{ width:300px;overflow:hidden;/* สำหรับ FF,Opera, ความกว้างคงที่; ซ่อนอักขระพิเศษ*/ word-wrap:break-word;word-break:normal;/* สำหรับ IE, Safari รองรับการตัดบรรทัดอัตโนมัติ*/ - </ สไตล์ >

คุณสามารถเรียกใช้โค้ดต่อไปนี้ใน IE, Firefox, Opera และ Safari ตามลำดับเพื่อดู:

< สไตล์   ประเภท = "ข้อความ/css" >    div {ความกว้าง:200px; พื้นหลัง: สีแดง; ล้น: ซ่อน; คำห่อ: แบ่งคำ; แบ่งคำ: ปกติ;} </ สไตล์ >    <div> ขอ แสดงความยินดี ด้วย ตัดอักขระยาว (เช่น URL และที่อยู่อีเมล): http://www.div-css.com/html/standard/base/81857.html SDFG บางคำมีการเว้นวรรค... XXXXXXXXXXXXDGXXXXXXXXXYYYYDFGYYXXXXXXXSDGXXXXXXXXXXXXyXXXXXXXXXxwhite-space: nowrap ฟอนต์จีนบางฟอนต์ ฟอนต์จีนบางฟอนต์ ฟอนต์จีนบางฟอนต์ ฟอนต์จีนบางฟอนต์ ฟอนต์จีนบางฟอนต์ อาจไม่ตัดคำ มาตรฐานเว็บ < ก   href = "http://www.div-css.com"   _fcksavedurl = "http://www.div-css.com" > www.div-css.com </ a >    ตัวอักษรจีน ตัวอักษรจีน ตัวอักษรจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน ตัวอักษรภาษาอังกฤษจีน </div>

นอกจากนี้ สำหรับวิธีการบนอินเทอร์เน็ตในการใช้ JS เพื่อตัดสตริงที่ยาวโดยอัตโนมัติใน Firefox นั้น ไม่แนะนำ เหตุผลก็คือสตริงที่ได้รับหลังจากการตัดจะไม่ใช่สตริงดั้งเดิมอีกต่อไป เช่น หากเป็นลิงก์ ที่อยู่ หากคัดลอกอีกครั้งคุณจะไม่ได้รับที่อยู่เดิมอีกต่อไปและจะมีช่องว่างตรงกลาง นั่นเป็นลิงค์อื่นแล้ว