div auto reaktionsschnell Weg, um text in

Ich habe ein DIV in ein anderes. Einer von denen hat "nur-text" und was ich will zu tun ist, um seine Breite automatisch mit einem maximalen mit möglich.

Hier ist der code:

HTML:

<div class="artigo_nome"> <!-- here is the part that I need help -->
    <p>
        Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A
    </p>
</div>
<div class="artigo_definicoes round_corner">
    <div class="separador_artigo_imagem">
        <img src="img/artigos/fones.png" class="imagem_artigo" alt="artigo"/>
    </div>
    <div class="artigo_info">
       Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A<br />
       <span class="ler_mais">ver mais</span><br />
       <span class="comparar">adicionar para comprar</span>
    </div>
</div>

CSS:

.categoria_lista_artigos .artigo_nome{
    color:#6e6e6e;
    width:234px;
    height:34px;
    margin-left: -2px;
    border-radius:5px 5px 0 0;
    border-left:2px #aeaeae solid;
    border-right:2px #aeaeae solid;
    border-bottom:1px #aeaeae solid;
    /*background-color:#E6E6E6;*/
    position:relative;
    font-weight: 600;
    -webkit-box-shadow: 0px -3px 5px #e2e2e2;
    -moz-box-shadow:    0px -3px 5px #e2e2e2;
    box-shadow:         0px -3px 5px #e2e2e2;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #cfcfcf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cfcfcf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#cfcfcf 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#cfcfcf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cfcfcf',GradientType=0 ); /* IE6-9 */
}

.categoria_lista_artigos .artigo_nome div {
    margin: auto;
    padding: 4px 13px;
    vertical-align: middle;
    line-height:13px;
}

Wenn Sie etwas brauchen, mehr, einfach sagen.

  • width:auto; ?
  • übrigens, für die div sind Sie versuchen, die Größe zu setzen?
  • Ich habe versucht, aber in diesem Fall kann ich nicht die max Breite, und wenn ich max-width, bleibt es immer auf die Breite, nicht darum, reaktionsschnell Weg
  • zu ".artigo_nome"
  • Es gibt einen extra </div> auf der Linie 6 bin ich mir nicht sicher, es ist beabsichtigt.
  • mein Fehler, danke @BenoitBlanchon

InformationsquelleAutor Ricardo Alves | 2013-09-11
  1. 4

    Was Sie wollen, ist eine shrink-to-fit-width für text-Zeile.

    Vereinfachen Sie Ihre HTML wie folgt:

    <div class="artigo_nome">
Computador Apple Imac 27P I5 3.5Ghz/8Gb/1Tb Md096Po/A
</div>

    und wenden Sie die folgenden CSS-Regeln:

    .artigo_nome {
    border: 1px dotted blue;
    display: inline-block;
    max-width: 250px;
    padding: 10px;
    word-break: break-all; /* optional */
}

    gibt das folgende Ergebnis: http://jsfiddle.net/audetwebdesign/vVhWR/

    Den inline-block wird Ihnen eine shrink-to-fit-Breite, die bis zu den angegebenen max-width Wert.

    Wenn Sie wollen in der Lage sein, zu wickeln, lange Wörter, fügen Sie die word-break Eigenschaft.

    Hinweis: ließ ich den Rand/Schatten/hintergrund-Design für Einfachheit, aber Sie können leicht fügen Sie Sie zurück in.

    • ja, aber jetzt kann ich nicht seine max-width
    • Wenn Sie setzen die maximale Breite, kann der text wrap auf einer zweiten Linie, aber das mag in Ordnung sein.
    • probiert, aber es bleibt fixiert auf die max-Breite
    • Fragen: (1) möchten Sie den text Zeile um in einer Zeile, wenn überhaupt möglich? (2) wollen Sie die Linie, um zu beginnen das einwickeln nach einer max Breite? (3) Wenn Sie sehr kurzen text, willst du die box shrink-to-fit-der text, wenn er weniger als max Breite?
    • 1) Nein, ich brauche es nicht in eine einzige Zeile, ich möchte nur, es zu haben, max Breite X px. 2) ja 3) ja
    InformationsquelleAutor Marc Audet
  2. 1

    Es ist illegal, benutzen Sie unformatierten text innerhalb eines div-Tags. Ich schlage vor, Sie fügen Sie ein "p" - Tags, um diese texes. Zu Ihrer Frage, ich bin mir nicht sicher, ob ich es schon richtig, aber Sie Fragen sich vielleicht für

    .selector {
    display: inline-block
    width: auto;
    max-width: 400px;
}
    InformationsquelleAutor Jonas Grumann
Schreibe einen Kommentar