zhangguanzhang's Blog

原生js左右分散对齐文字

字数统计: 393阅读时长: 1 min
2016/10/29 Share

练习下

前天晚上看到群里有人问如何左右分散对齐文字

网上查了下基本都是text-align:justify; text-justify:distribute-all-lines; 的

这几种还不兼容,就自己想了个另类思路,每个文字之间插入一个div,然后把这些插入的div宽度设置成=(父级div宽度-文字宽度*文字个数)/(插入的div个数)


随便设置的父级宽度,以下是body内容

codebody


以下是函数

jscode


下面是测试

test
test1
test2
改变父级div宽度和文字内容,依旧分散对齐,成功!

文字宽度总不可能比超过文字高度吧,这里我用16代替,倘若你自己设置了字体大小js获取代替掉16即可


有一点我很好奇,我也是刚接触js,刚开始写的时候没有33行插入的div会有undefine字样

具体点击这里


以下是总结
刚接触,也算业余学学吧,之前都是慕课上敲代码,比较简单性的,前天晚上到今天早晨,虽然思路清晰,但是实际写起来还是依靠百度,有些细节性的东西还是得实际中才能学到
,还没完善,js还没学完,初学点皮毛,思路就是上面这样,如果有人看到这篇文章可以考虑完善下直接几个id或者类名参数输进去直接就自动分散那就更好了。话说上面undefined真是莫名其妙,问了很多人都没得到解决

CATALOG
  1. 1. 前天晚上看到群里有人问如何左右分散对齐文字
  2. 2. 网上查了下基本都是text-align:justify; text-justify:distribute-all-lines; 的
  3. 3. 随便设置的父级宽度,以下是body内容
    1. 3.1. 以下是函数
    2. 3.2. 下面是测试
    3. 3.3. 有一点我很好奇,我也是刚接触js,刚开始写的时候没有33行插入的div会有undefine字样