วิธีหยุดข้อความไม่ให้เกิน 1 บรรทัด?

มีการตัดคำหรือคุณลักษณะอื่น ๆ ที่หยุดข้อความจากการตัด? ฉันมีความสูงและoverflow:hiddenและข้อความก็ยังคงพัก

ต้องการทำงานกับเบราว์เซอร์ทั้งหมดก่อน CSS3

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

หมายเหตุ: ใช้งานได้เฉพาะกับองค์ประกอบบล็อก หากคุณต้องการทำสิ่งนี้กับเซลล์ตาราง (ตัวอย่าง) คุณต้องใส่ div ไว้ในเซลล์ตารางเนื่องจากเซลล์ตารางมีการแสดงเซลล์แบบตารางไม่ได้ถูกบล็อก

ในฐานะของ CSS3 สิ่งนี้ได้รับการสนับสนุนสำหรับเซลล์ตารางเช่นกัน

คุณสามารถใช้CSS white-space Propertyเพื่อให้บรรลุสิ่งนี้

white-space: nowrap

การใช้จุดไข่ปลาจะเพิ่ม ... ในที่สุด

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

บางครั้งการใช้ แทนการเว้นวรรคก็ใช้งานได้ เห็นได้ชัดว่ามันมีข้อเสีย

เพียงเพื่อจะใสนี้ทำงานอย่างกับย่อหน้าและส่วนหัว ฯลฯ display: blockคุณเพียงแค่ต้องระบุ

ตัวอย่างเช่น

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(ยกโทษให้กับรูปแบบอินไลน์)