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

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

2024-12-02 13:59:36

推荐回答（5个）

回答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; }

回答2：

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

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

回答3：

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

回答4：

1、给li加个PADDING:0和MARGIN:0 试试；
2、

测试测试测试测试测试测试测试测试测试测试测试

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标签然后修改样式，上面是我测试用的代码。

回答5：

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

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

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

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