Question

我有li包含标题和几个链接。根据标题和链接中的字符，li宽度应为auto，但最大宽度可以为166px。如果任何行大于166px，那么应该有单词分隔。

问题是当标题较大并且使用分词时，li仍然使用最大宽度166px，但其宽度应该按照单词宽度。

点击 HTML / CSS ： Fiddle

Answer 1

使用 min-width 而不是max-width 这将解决你保持宽度166px的目的。

Answer 2

删除

max-width: 166px

来自li元素的

如果你想要一些最小宽度添加

min-width: 100px

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

Answer 3

这是 DEMO

需要修改的

CSS （其余部分保持不变）：

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属性......这样做（尽管我不建议它... ...你应该在width上设置ul !!

此外，要打破大词，请使用word-break: break-all;属性...其安静方便... Read More Here

容器使用其最大宽度，即使文本不是那么大

3 个答案: