Question

css中如何在设置了line-height 和 height的情况下 让文字能自动换行？

上面是代码，下面是chrome的效果图，期间插入了一个reset的css样式表，插入的图片为第二张图中每一行的小圆点，然后repeat之后得到文字下划虚线，我有两个问题：
1：为什么我设置了li的line-height为21px（如图中蓝色大方框所示）, 而谷歌所提示的li宽为22px（如图中蓝色小方框所示）？
2：css中如何在设置了line-height 和 height的情况下，让文字能自动换行，也就是让文字沿着下划虚线显示，而非像图中黄色方框所示，排放错乱？
跪求大神详细解答，我纠结了一晚上。。。。





Answer 1

不知道你是不是要这种效果

css

*{ margin: 0; padding: 0; border: 0;}

body{ font-size: 14px; font-family: "微软雅黑";}

ul{ width: 300px; margin: 50px auto; background: url(1.jpg);}

a{ color: #333; text-decoration: none; }

li{ list-style: disc ;  line-height: 21px;  }

Answer 2

文字自动换行和行高以及盒子高度无主要关系，但是固定高度的时候，文字太多会溢出。line-height指的是行高，可以决定盒子高度能分配几行文字。
自动换行方法：
div{
word-wrap: break-word;
//word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行
word-break: normal;
}

一般盒子高度不会固定，而是虽着文字的的多少自动增加高度。

Answer 3

首先我不知道你的全局样式写了没有，如果没有的话最好写一个，不然会出很多BUG。然后我没看见你这边有设置li的高度。line-height是行高，也可以理解为行间距，并不是你line-height有多高你的li就会有多高，li在自适应的情况下是字体的高度加上padding的高度再加上line-height来自行判断高度的。我建议你干脆不要用Line-height,直接给li一个固定高度，高度为两条虚线间的距离，然后给个display:inline-block,vertical-align:bottom;应该就能实现了

追问

恩 我在reset表中写了padding margining 值为0 ，后来我也发现自己的问题了，我在a标签中添加了 然后在li中设置了line-height：21px, 所以谷歌显示高度为22px，但是当我把font-size：13px 添加到li标签中，就显示正常了。真是奇怪，不知道是什么原理。。。

Answer 4

1、给li加个PADDING:0和MARGIN:0 试试；
2、<li><u>测试测试测试测试测试测试测试测试测试测试测试</u></li>
ul{ list-style:none; padding:0; margin:0; width:300px}
li { margin:0; padding:0; line-height:21px; width:100%;}
u { border-bottom:1px dashed #000; text-decoration:none; padding-bottom:1px}
在li标签中加u标签然后修改样式，上面是我测试用的代码。

Answer 5

在你文字所在的那个元素加一个样式
word-break:break-all;

希望你的问题能解决，望采纳

追问

没有效果。。。