文本均匀分布两端对齐等

还有很多不知道的细节,慢慢积累。这里把遇到的问题记录一下,比如文本两端对齐,比如利用a标签的download属性,比如ie8下img标签的宽高问题,比如overflow默认属性值等等。

文本均匀分布两端对齐等

文本两端对齐

实现文本两端对齐其实很简单,只需要一个属性

1
2
word-break: break-all;
text-align: justify;

上面用word-break只是为了让英文字符断行,主要是用了text-align的justify属性,这个据说是css2.1就支持的。

a标签实现下载

你知道a标签有个download属性吗,

1
2
3
<a href="/i/w3school_logo_white.gif" download="w3logo">
点我下载
</a>

其中href指定了下载的文件地址,download属性制定了下载的文件名称。注意这个href可以是blob的对象,是不是很惊喜。直接通过客户端就可以实现文本操作保存下载了。也有人基于这个特性做了一个组件fileSaver: https://github.com/eligrey/FileSaver.js

img标签的width和height在IE8下失效

你可以试一下,在IE8下img如果只设置width和height属性是会有问题的,需要同时设置css样式中的width和height属性。所以一般推荐做法:

1
<img width="80" height="80" style="width:80px;height:80px;" />

overflow默认属性

一直以为是auto其实不是,overflow的默认属性是visible。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

间隔号和空格的展示问题

“学 · 问”同样的微软雅黑字体,在windows的浏览器下不会换行,但是在mac的浏览器下,间隔号和左右的空格展示的都会比windows的宽一些,导致会折行展示。所以这个文本带有符号的,建议把宽度设置的宽一点,建议宽度加10px。

谢谢!

转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2017/02/09/2017_textAlign/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

fed123版权所有,转载请保留出处:前端123学堂 » 文本均匀分布两端对齐等

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏