Question

我有一种你可以看到的设计风格：http://jsfiddle.net/mohammad6006/Q6g3n/

结果你看到第2行的测试2

我的div宽度为220px，我不想在另一行显示更多字符

OR

当li文本字符超过220px时创建新行但下一行显示在其他行

更多描述：

<li>
    <a title="" href="">test2 test2 test2 test2 test2 test2 test2 test2 </a>
</li>
<li>
    <a title="" href="">test 3</a>
</li>

test2 test2 test2 test2 test2 test2 test2 test2字符超过一行，因此额外字符显示在新行中，测试3 li也显示在其他行中。

Answer 1

您可以使用min-height，因此它使用您的28px高度作为基础，其余的可以自我扩展。

您需要设置#body-right ul li {}
来自
#body-right ul li {height:28px;}
至
#body-right ul li {min-height:28px;}

更新了JsFiddle

Answer 2

here is a fiddle

/css: min-height ist the solution

我也会删除你的背景图像并替换它（因为没有理由使用和图像）

/css: border-bottom:1px solid red;

Answer 3

使用这个CSS：

从＃body-right ul li中删除样式“height：28px” 即

    #body-right ul li {
      background: url("../images/blog-body-right-line.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
      direction: rtl;
      line-height: 28px;
      list-style: none outside none;
      text-align: right;
      word-wrap:break-word;  

}

如何设置带有额外字符的li标签？

3 个答案: