使用其最大宽度的容器，即使文本不太大

Question

我有一个包含标题和几个链接的li。li宽度应按标题和链接中的字符为auto，但最大宽度可为166 be。如果任何一行大于166 is，则应该有分词。

问题是当标题较大并且使用分词时，li仍然使用最大宽度，即166 as，但它的宽度应该与单词宽度相同。

查看此处的/CSS：小提琴

Answer 1

这是一个

需要修改的CSS (rest一切保持不变)：

ul {
    background: #e7e7e7;
    float: left;
    margin: 0;
    padding: 0;
    width:20%; /*add this to have a clear picture, optional but recommended*/

}

span, a {
    display: block;
    font: 14px arial;
    word-break: break-all; /*add this*/
    max-width:80% ;
}

您错过的是，ul是父级的，您正在设置子max属性li...to，这样做(尽管我不建议)...you也应该在ul上设置width！

另外，要想破译大话，请使用word-break: break-all; property...its Additionally .在这里读更多

Answer 2

删除

max-width: 166px 

在li元素中，如果您想要一些最小宽度添加

min-width: 100px

检查http://jsfiddle.net/raunakkathuria/2q8WS/4/