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

258

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.

Misza Moroszko
źródło
12
white-space: nowrapumieść to w swoim tagu stylu.
Moshii

Odpowiedzi:

521

Spróbuj tego:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}
Bazzz
źródło
71

Użyj white-space:nowrapioverflow:hidden

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

inny krzak
źródło
34
Dodaj text-overflow:ellipsis;powyżej, aby lepiej wyglądać.
tj-reess
czy można to osiągnąć bez css?
nilon
51

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

Rob Agar
źródło
14

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 ...
Bozlur Rahman
źródło
12

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.

Marc Audet
źródło
4

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/

Mike B.
źródło
4

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>
Dököll
źródło
Ogromna pomoc w tym, to wszystko działało dla mnie, prawdopodobnie spędziłem na tym 30 minut, lol. Co dziwne, nie używam żadnego z wymienionych przez ciebie elementów, css, javascript, bootstrap i niektórych niestandardowych css.
edencorbin,
3

dodaj to do swojej div

white-space: nowrap;

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

stephenmurdoch
źródło
1
możesz dodać: przepełnienie: auto, aby wyświetlić poziomy pasek przewijania
Sarah West
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

Pingger Shikkoken
źródło
0

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;
}
Wouter Simons
źródło
W twoim przypadku opcja nowrap jest prawdopodobnie lepsza, ale zostawiłem swoją odpowiedź, ponieważ czasami potrzebuję bloku, który może mieć zawijanie niektórych wierszy, dopóki się nie przepełni: jsfiddle.net/NXchy/7 (zmieniłem link z wersji Stephenmurdocha , dzięki!)
Wouter Simons,
Nie trzeba tego, co się stanie, jeśli użytkownik chce zwiększyć rozmiar tekstu za pomocą ctrl- +? Utrzymanie elastyczności wysokości jest lepsze.
Marc Audet,
Jeśli użytkownik zmieni rozmiar tekstu za pomocą ctrl- +, powinien po prostu działać: jsfiddle.net/kpKW3
Wouter Simons
Użycie em's w heightutrzymuje elastyczność, kluczowy punkt dobrze zilustrowany tutaj w twoim przykładzie.
Marc Audet,