HTML + CSS: Jak zmusić zawartość div do pozostania w jednym wierszu?

Mam długi tekst w środku divze zdefiniowanymwidth :

HTML:

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

CSS:

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

Jak zmusić ciąg do pozostania w jednej linii (tzn. Do przecięcia w środku „Przepełnienia”)?

Próbowałem użyć overflow: hidden, ale to nie pomogło.

Spróbuj tego:

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

Użyj white-space:nowrapioverflow:hidden

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

w twoim użyciu css white-space:nowrap;

Twój kod HTML: <div>Stack Overflow is the BEST !!!</div>

CSS:

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

Teraz wynikiem powinno być:

Stack Overf ...

Wszyscy wskoczyli na to !!! Ja też zrobiłem skrzypce:

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

RobAgar dostaje punkt za wskazanie w white-space:nowrappierwszej kolejności.

Kilka rzeczy tutaj, overflow: hiddenjeśli nie chcesz, aby dodatkowe postacie pojawiały się w twoim układzie.

Ponadto, jak wspomniano, możesz użyć white-space: pre(patrz EnderMB), pamiętając, że prenie spowoduje to zapadnięcia się białych znaków, ale white-space: nowrapbędzie.

Spróbuj. Używa preraczej niż, nowrapjak zakładam, chciałbyś, aby działało podobnie, <pre>ale albo działa dobrze:

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

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

Skoczyłem tutaj, szukając tego samego, ale żadne nie działało dla mnie.

Są przypadki, w których niezależnie od tego, co robisz, i w zależności od systemu (Oracle Designer: Oracle 11g - PL / SQL) divs zawsze przechodzi do następnego wiersza, w którym to przypadku powinieneś użyć znacznika span.

To działało dla mnie cuda.

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

dodaj to do swojej div

white-space: nowrap;

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

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

było rozwiązaniem, które działało dla mnie. W niektórych przypadkach z div-listami jest to potrzebne.

niektóre alternatywne wartości kierunkowe są row-reverse, column, column-reverse, unset, initial, inherit zgodne z oczekiwaniami

Spróbuj ustawić wysokość, aby blok nie mógł urosnąć, aby pomieścić tekst, i zachowaj overflow: hiddenparametr

EDYCJA: Oto przykład tego, co może Ci się spodobać, jeśli chcesz wyświetlić 2 linie wysokości:

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