HTML + CSS: วิธีบังคับให้เนื้อหา div อยู่ในบรรทัดเดียวได้อย่างไร

ฉันมีข้อความยาวภายในที่divกำหนดไว้width :

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

ฉันจะบังคับให้สตริงอยู่ในหนึ่งบรรทัดได้อย่างไร (เช่นถูกตัดกลาง "โอเวอร์โฟลว์")

ฉันพยายามใช้overflow: hiddenแต่ก็ไม่ได้ช่วยอะไร

ลองสิ่งนี้:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

ใช้white-space:nowrapและoverflow:hidden

http://jsfiddle.net/NXchy/8/

ใน CSS ของคุณใช้ white-space:nowrap;

รหัส HTML ของคุณ: <div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

ตอนนี้ผลลัพธ์ควรเป็น:

สแต็คโอเวอร์ ...

ทุกคนกระโดดขึ้นไปบนนี้ !!! ฉันก็ทำซอ:

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar ได้คะแนนจากการชี้white-space:nowrapก่อน

สองสามสิ่งที่คุณต้องการoverflow: hiddenถ้าคุณไม่ต้องการเห็นตัวละครพิเศษโผล่เข้ามาในเลย์เอาต์ของคุณ

นอกจากนี้ตามที่กล่าวไว้คุณสามารถใช้white-space: pre(ดู EnderMB) โปรดทราบว่าpreจะไม่ยุบพื้นที่สีขาวตามที่white-space: nowrapต้องการ

ลองดูสิ มันใช้งานpreมากกว่าnowrapที่ฉันคิดว่าคุณต้องการให้มันทำงานคล้าย ๆ กัน<pre>แต่จะใช้งานได้ดี:

div {
    border: 1px solid black;
    max-width: 70px;
    white-space:pre;
}

http://jsfiddle.net/NXchy/11/

ฉันกระโดดขึ้นมาที่นี่เพื่อค้นหาสิ่งเดียวกัน แต่ไม่มีใครทำงานให้ฉัน

มีอินสแตนซ์ที่ไม่ว่าคุณจะทำอะไรและขึ้นอยู่กับระบบ (Oracle Designer: Oracle 11g - PL / SQL) divs จะไปที่บรรทัดถัดไปเสมอซึ่งในกรณีนี้คุณควรใช้ span tag แทน

สิ่งนี้ได้ผลมหัศจรรย์สำหรับฉัน

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue"  />
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>

เพิ่มลงใน div ของคุณ

white-space: nowrap;

http://jsfiddle.net/NXchy/1/

div {
    display: flex;
    flex-direction: row; 
}

เป็นวิธีแก้ปัญหาที่เหมาะกับฉัน ในบางกรณีที่มี - divรายการนี้จำเป็น

ค่าทิศทางที่เป็นทางเลือกคือrow-reverse, column, column-reverse, unset, initial, inherit สิ่งที่คุณคาดหวังให้ทำ

ลองตั้งค่าความสูงเพื่อให้บล็อกไม่สามารถเติบโตเพื่อรองรับข้อความของคุณและรักษาoverflow: hiddenพารามิเตอร์ไว้

แก้ไข: นี่คือตัวอย่างของสิ่งที่คุณอาจชอบถ้าคุณต้องการแสดง 2 บรรทัดสูง:

div {
    border: 1px solid black;
    width: 70px;
    height: 2.2em;
    overflow: hidden;
}