Question

我在另一个里面有一个DIV。其中一个有“纯文本”，我想做的是尽可能自动地使其宽度自动。

以下是代码：

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

如果您还需要更多信息，请说出来。

Answer 1

您想要的是文本行的缩小宽度。

您可以按如下方式简化HTML：

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

并应用以下CSS规则：

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

得出以下结果：http://jsfiddle.net/audetwebdesign/vVhWR/

inline-block会为您提供符合指定max-width值的缩小宽度。

如果您希望能够包装长词，请添加word-break属性。

注意：为了简单起见，我省略了边框/阴影/背景样式，但您可以轻松地将它们重新添加。

Answer 2

在div标签内使用纯文本是违法的。我建议你在这些文本周围添加一个“p”标签。关于你的问题，我不确定我是否正确，但你可能会要求

.selector {
    display: inline-block
    width: auto;
    max-width: 400px;
}

div自动响应文本内部

2 个答案: