HTML + CSS: Làm cách nào để buộc các nội dung div ở trong một dòng?

Tôi có một văn bản dài bên trong a divvới định nghĩawidth :

HTML:

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

CSS:

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

Làm thế nào tôi có thể buộc chuỗi ở lại một dòng (nghĩa là bị cắt ở giữa "Tràn")?

Tôi đã cố gắng sử dụng overflow: hidden, nhưng nó không có ích.

Thử cái này:

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

Sử dụng white-space:nowrapvàoverflow:hidden

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

trong sử dụng css của bạn white-space:nowrap;

Mã HTML của bạn: <div>Stack Overflow is the BEST !!!</div>

CSS:

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

Bây giờ kết quả sẽ là:

Chồng quá mức ...

Mọi người nhảy vào cái này !!! Tôi cũng đã thực hiện một câu đố:

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

RobAgar được một điểm để chỉ ra white-space:nowrapđầu tiên.

Vài điều ở đây, bạn cần overflow: hiddennếu bạn không muốn thấy các nhân vật phụ thò ra trong bố cục của mình.

Ngoài ra, như đã đề cập, bạn có thể sử dụng white-space: pre(xem EnderMB) lưu ý rằng presẽ không thu gọn khoảng trắng trong khi đó white-space: nowrap.

Hãy thử cái này Nó sử dụng prechứ không phải nowrapnhư tôi nghĩ bạn sẽ muốn nó chạy tương tự <pre>nhưng sẽ hoạt động tốt:

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

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

Tôi nhảy vào đây để tìm kiếm điều tương tự, nhưng không ai làm việc cho tôi.

Có những trường hợp bất kể bạn làm gì và tùy thuộc vào hệ thống (Nhà thiết kế Oracle: Oracle 11g - PL / SQL), div sẽ luôn đi đến dòng tiếp theo, trong trường hợp đó bạn nên sử dụng thẻ span thay thế.

Điều này làm việc kỳ diệu cho tôi.

<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>

thêm cái này vào div của bạn

white-space: nowrap;

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

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

là giải pháp hiệu quả với tôi Trong một số trường hợp với divdanh sách này là cần thiết.

Một số giá trị hướng thay thế là row-reverse, column, column-reverse, unset, initial, inherit những việc bạn làm chúng mong đợi

Hãy thử đặt chiều cao để khối không thể phát triển để chứa văn bản của bạn và giữ overflow: hiddentham số

EDIT: Đây là một ví dụ về những gì bạn có thể thích nếu bạn cần hiển thị cao 2 dòng:

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