不经过悉心栽培,花儿开不出鲜艳的花朵;不经过时间的历练,幼苗长不成参天大树。

常用技巧:CSS样式中,文字对不齐的解决办法

web 建伟 3319℃ 0评论

大家可能在写css样式时,有时会遇到许多莫名其妙的问题。

最近在写一个页面时,遇到一个问题,准确来说是忽略了一个问题。如下:

代码:

1
2
3
4
5
6
7
 <style type="text/css">
 div{width: 200px; height: 300px; border: 1px solid red;}
 </style>
 <body>
 <div>
 宜兴遭遇17年来最大水灾 一14岁女孩家门口被水冲走至今下落不明】网友爆料:7月2日中午,宜兴新街派出所接到报警,在新街铜山板栗园,一名14岁的小女孩站在家门口(涧滩)旁边被水冲走,当时雨非常大,小女孩往前跨了一步,奶奶未能及时拉住。随后记者从宜兴市消防证实了此事。
 </div>

效果:

QQ截图20160703155042

相信大家也看出来了,右边总是对不齐,后来找个半天,终于找到解决办法,只要给div加上这俩个属性即可text-align:justify; text-justify:inter-ideograph;,这俩个属性的大概意思是:

text-align:justify;实现两端对齐文本效果。  text-justify:inter-ideograph;用表意文本来排齐内容。

好了,大家去尝试尝试吧。

 

转载请注明:Li Jianwei's Blog » 常用技巧:CSS样式中,文字对不齐的解决办法

喜欢 (5)or分享 (0)
web技术交流群
22765697