Question

我正在开发一个简单的html和css的web应用程序的前端，它将被移交以进一步集成。

目标

我想创建一个符合段落大小的动态通知元素，直到达到最大宽度并且段落中断到下一行。

问题

div只占据最长的单词宽度或最小宽度，并且在达到最大宽度之前不会完全展开。

我想把它全部保存在CSS中，但我怀疑我可能需要一些JS，如果有的话，请指出我正确的方向。 =）

HTML

<div class="noti"><p>The notification text will appear over here, and spill over to the next line if long enough.</p></div>

CSS

.noti {
    height:auto;
    min-height:50px;
    width:auto;
    max-width:300px;
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 55px;
    right: 0px;
    border: solid 5px #007DAC;
    border-radius: 25px 25px 5px 25px;
    padding: 10px;
    background:#FFF;
    line-height:normal;
    text-align:left;
    color:#007DAC;
}

http://jsfiddle.net/074Lb4qb/ 编辑这有效，但相同的代码在Dreamweaver中不起作用或在firefox或chrome中预览。

Answer 1

好的，由于没有按模块化工作，我发现问题是通知<li>是其子代的<div>元素。 <li>元素正在修改宽度值。

Answer 2

我不明白你真正想说的是什么。但你可以添加自动换行：break-word;

.noti {
    height:auto;
    min-height:50px;
    width:auto;
    max-width:300px;
    font-family: 'Arvo', serif;
    position: absolute;
    bottom: 55px;
    right: 0px;
    border: solid 5px #007DAC;
    border-radius: 25px 25px 5px 25px;
    padding: 10px;
    background:#FFF;
    line-height:normal;
    text-align:left;
    color:#007DAC;
        word-wrap: break-word;
}

jsfiddle

段落元素在换行符之前将div扩展为最大宽度

2 个答案: