宽度、高度

字体的行高跟字体设计相关,有的1.4、有的1.8等等(font-size:20px时,line-height可能为28、30等)。如果div里只有内联元素,则div高度由行高决定,跟字体大小无关。

字体对齐:英文不需要对齐

宽度、高度_第1张图片

字体和字体间由空隙,可能是字体中间有空格或者回车,用float:left去除,然后在父类加clearfix

宽度、高度_第2张图片

由于外国使用单词的原因,有时候页面后面放不下一个单词,所以换行时会整个单词一起换行,导致页面不好看,想拆分单词换行,用word-break:break-all。(也可以用  -  )




单行文字溢出

宽度、高度_第3张图片

多行文字溢出

宽度、高度_第4张图片
line-clanp为自定义行数(IE不支持)

文字居中

当确定文字占据的高度时,不能把高度写死,而是 line-height + padding = 高度,写死高度只要文字超出一行且另一个标签下面还有文字就容易出现bug,如下

宽度、高度_第5张图片
出现bug
宽度、高度_第6张图片
应该这样写

水平居中   text-align:center  

你可能感兴趣的:(宽度、高度)