HTML + CSS: Wie erzwinge Div-Inhalte in einer Zeile zu bleiben?

Ich habe einen langen text in ein div mit dem angegebenen width:

HTML:

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

CSS:

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

Wie konnte ich Kraft die saite zu bleiben in einer Linie (d.h. zu schneiden, in der Mitte der "Überlauf") ?

Habe ich versucht zu verwenden overflow: hidden, aber es hat nicht geholfen.

Kommentar zu dem Problem - Öffnen
white-space: nowrap setzen Sie diese in Ihrem Stil-Tags. Kommentarautor: Moshii

InformationsquelleAutor der Frage Misha Moroshko | 2011-03-08

  1. 377

    Versuchen Sie dies:

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

    InformationsquelleAutor der Antwort Bazzz

  2. 56

    Verwenden white-space:nowrap und overflow:hidden

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

    InformationsquelleAutor der Antwort anothershrubery

  3. 43

    in Ihre css verwenden white-space:nowrap;

    InformationsquelleAutor der Antwort Rob Agar

  4. 10

    Jeder sprang auf diesen einen!!! Auch ich machte ein Turnschuh:

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

    RobAgar bekommt einen Punkt für den Hinweis white-space:nowrap ersten.

    Paar Dinge, die Sie brauchen overflow: hidden wenn Sie nicht wollen, um zu sehen, die extra Charaktere Stossen in Ihr layout.

    Auch, wie bereits erwähnt, könnten Sie white-space: pre (siehe EnderMB) halten dagegen, dass pre wird nicht zusammenbrechen, weißen Raum, in der Erwägung, dass white-space: nowrap wird.

    InformationsquelleAutor der Antwort Marc Audet

  5. 7

    Ihren HTML-code ein:
    <div>Stack Overflow is the BEST !!!</div>

    CSS:

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

    Nun das Ergebnis sollte sein:

    Stack Overf...

    InformationsquelleAutor der Antwort bozlur rahman

  6. 3

    fügen Sie diese zu Ihrem div

    white-space: nowrap;

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

    InformationsquelleAutor der Antwort stephenmurdoch

  7. 3

    Geben diesem einen Versuch. Es nutzt pre eher als nowrap als würde ich davon ausgehen, Sie würden das wollen, führen Sie ebenso zu <pre> aber entweder wird gut funktionieren:

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

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

    InformationsquelleAutor der Antwort Mike B

  8. 3

    Sprang ich hier auf der Suche für die gleiche Sache, aber keine für mich gearbeitet.

    Gibt es Fälle, wo, egal was Sie tun, und je nach system (Oracle Designer: Oracle 11g - PL/SQL), divs wird immer wieder die nächste Zeile, in dem Fall sollten Sie den span-tag statt.

    Dies wirkte Wunder für mich.

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

    InformationsquelleAutor der Antwort Dököll

  9. 0

    Versuchen Sie es mit einer Höhe, so kann der block auch nicht wachsen, um Platz für Ihren text, und halten Sie die overflow: hidden parameter

    EDIT: Hier ist ein Beispiel von, was Sie mögen, wenn Sie brauchen, um die display-2 Zeilen hoch:

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

    InformationsquelleAutor der Antwort Wouter Simons

Schreibe einen Kommentar