css overflow - มีข้อความเพียง 1 บรรทัด

ฉันมีdivสไตล์ css ต่อไปนี้:

width:335px; float:left; overflow:hidden; padding-left:5px;

เมื่อฉันแทรกdivข้อความยาวๆ เข้าไปในนั้นมันจะแตกเป็นบรรทัดใหม่และแสดงข้อความทั้งหมด สิ่งที่ฉันต้องการคือมีข้อความเพียงบรรทัดเดียวที่จะไม่แตกบรรทัด เมื่อข้อความยาวฉันต้องการให้ข้อความล้นนี้หายไป

ฉันคิดจะตั้งความสูง แต่ดูเหมือนจะผิด

บางทีถ้าฉันเพิ่มความสูงที่เหมือนกับฟอนต์มันควรจะใช้งานได้และไม่ก่อให้เกิดปัญหาในเบราว์เซอร์อื่น?

ฉันจะทำเช่นนั้นได้อย่างไร?

หากคุณต้องการ จำกัด ไว้ที่บรรทัดเดียวให้ใช้white-space: nowrap;บน div

หากคุณต้องการระบุว่ายังมีเนื้อหาเพิ่มเติมใน div นั้นคุณอาจต้องการแสดง "จุดไข่ปลา":

text-overflow: ellipsis;

สิ่งนี้ควรอยู่นอกเหนือwhite-space: nowrap;จากที่ Septnuits แนะนำ

นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณชำระเงินชุดข้อความนี้เพื่อจัดการเรื่องนี้ใน Firefox

คุณสามารถใช้รหัส css นี้:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

คุณสมบัติtext-overflowใน CSS เกี่ยวข้องกับสถานการณ์ที่ข้อความถูกตัดออกเมื่อมันล้นกล่องขององค์ประกอบ สามารถตัด (เช่นตัด, ซ่อน), แสดงจุดไข่ปลา ('…', ค่าช่วง Unicode U + 2026)

โปรดสังเกตว่าtext-overflowจะเกิดขึ้นก็ต่อเมื่อคุณสมบัติ overflow ของ container มีค่าที่ซ่อนอยู่ , scrollหรือautoและwhite-space: nowrap; .

การล้นของข้อความสามารถเกิดขึ้นได้เฉพาะในองค์ประกอบระดับบล็อกหรือแบบอินไลน์เนื่องจากองค์ประกอบต้องมีความกว้างจึงจะสามารถแก้ไขได้ การล้นเกิดขึ้นในทิศทางที่กำหนดโดยคุณสมบัติทิศทางหรือคุณลักษณะที่เกี่ยวข้อง

รหัสที่ดีที่สุดสำหรับ UX และ UI คือ

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

หากนอกจากนี้โปรดหากคุณมีข้อความยาวโปรดใช้รหัส css ร้องนี้

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

ทำให้เห็นข้อความทั้งบรรทัด

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

กำหนดความกว้างเพื่อตั้งค่าล้นในหนึ่งบรรทัด

ฉันมีปัญหาเดียวกันและฉันแก้ไขได้โดยใช้:

display: inline-block;

ในdivคำถาม