文本对齐 text-align text-justify

在开发的过程中,有时需要保存整个的单词,但是,尴尬的是,单词的大小总不是一致的,这就会导致,某个比较长的单词窜到了下一行,而上一行就会留下很大的空白,这个时候该怎么办?

这个时候其实可以通过下面的方式来实现:

.someclass {
    text-align:justify;
    text-justify:inter-word;
}

text-align

一般来讲,我们常用的text-align的值只有三类: centerleftright,但是,text-align可以取以下几个值:

取值 说明
left 对左靠齐
right 对右靠齐
center 居中
justify 自适应,实现两端对齐文本效果。
inherit 继承父元素text-align效果

text-justify

取值 说明
auto 浏览器决定齐行算法。
none 禁用对齐
inter-word 增加/减少单词间的间隔。
inter-ideograph 用表意文本来排齐内容
inter-cluster 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。
distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。
kashida 通过拉伸字符来排齐内容。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 逼自己说几句 我就头疼这个text-align,因为每次拼写比写错,也是没谁了,在这里我就不把错的写出来了,惩罚自...
    江君同学阅读 3,063评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0 1
  • 今天的晨读文章讲的是爱的五种语言:肯定的语言、关注的时刻、专属的礼物、服务的行动和身体的接触。我选择我感触最深的2...
    喵皇后阅读 257评论 0 1