ครอบตัดข้อความยาวเกินไปภายใน div

<div style="display:inline-block;width:100px;">

very long text
</div>

วิธีใดก็ตามในการใช้ pure css เพื่อตัดข้อความที่ยาวเกินไปแทนที่จะแสดงในบรรทัดใหม่ถัดไปและแสดงสูงสุด 100px เท่านั้น

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

นี่เป็นแนวทางหนึ่งที่เป็นไปได้ที่ฉันคิดได้

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

วิธีนี้ข้อความยาวจะยังคงตัด แต่จะไม่สามารถมองเห็นได้เนื่องจากการoverflowตั้งค่าและด้วยการตั้งค่าline-heightเดียวกันกับที่heightเราทำให้แน่ใจว่าจะแสดงเพียงบรรทัดเดียว

ดูการสาธิตที่นี่และคำอธิบายคุณสมบัติล้นพร้อมตัวอย่างแบบโต้ตอบ

คุณสามารถใช้ได้:

overflow:hidden;

เพื่อซ่อนข้อความนอกโซน

โปรดทราบว่าอาจตัดตัวอักษรสุดท้าย (ดังนั้นส่วนหนึ่งของตัวอักษรสุดท้ายจะยังคงปรากฏอยู่) วิธีที่ดีกว่าคือการแสดงจุดไข่ปลาที่ส่วนท้าย คุณสามารถทำได้โดยใช้text-overflow:

overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;

.crop { 
  overflow:hidden; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  width:100px; 
}​

http://jsfiddle.net/hT3YA/

ทำไมไม่ใช้หน่วยสัมพัทธ์?

.cropText {
    max-width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

โค้ดด้านล่างนี้จะซ่อนข้อความของคุณด้วยความกว้างคงที่ที่คุณต้องการ แต่ไม่ค่อยเหมาะสำหรับการออกแบบที่ตอบสนอง

.CropLongTexts {
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

อัปเดต

ฉันสังเกตเห็นในอุปกรณ์ (มือถือ) ว่าข้อความ (ผสม) ซึ่งกันและกันเนื่องจาก (ความกว้างคงที่) ...

.CropLongTexts {
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(ความกว้างสูงสุด) ช่วยให้แน่ใจว่าข้อความจะถูกซ่อนไว้อย่างตอบสนองไม่ว่าจะเป็น (ขนาดหน้าจอ) และจะไม่ปะปนกัน