CSS之换行

都说前端的东西多,难记,不说js那些各种各样的方法,那些经常用到的话还好一些,随手都可以拾起来,但是css中的参数则不然,除了一些根深蒂固
性的东西,一些特殊的参数真的是不容易记住,而且特别容易忘啊,最近一直在写后端跟架构的事,好久都没碰前端的样式了,乘着过年这几天把样式
的东西再回顾一下,省的彻底忘却了,需要的时候还得乱七八糟的寻找。
今天晚上都除夕夜了,下午睡不着觉,闲着没事,看看浏览器标签历史里有什么呢,就讲讲文字溢出的问题吧,前端经常会处理一些文字
方面的问题,由于文字内容太长,而受限于显示效果,所以只能把一些文字进行缩写,比如将文字后面添加省略号,hover或双击文字时会
显示全部内容等等的处理方法。

这经常会用到text-overflow属性,这几个属性必须联用;因为只有不让内容溢出和换行的情况下才可以省略;
还有一点需要注意:宽度必须大于三个省略号的宽度,否则也将没有效果;
.text{
    width:16px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
要注意table上用这个用法时,要先将table的宽度定住,一般用table-layout属性,
table-layout一般有两个属性值:automatic和fixed,一般默认情况下是automatic的,即表格会根据内容的不同长度来扩充宽度,而我们给td设置padding
之类的来保证美观;若要直接设置表格的宽度,需要设置值为fixed,这样在表格第一行固定的情况下就确定了整个表格的大小;既可以用宽度,
也可以用比例来设置;
我们上面说到的省略内容也需要用到这个属性来固定住td的宽度,然后才能进行省略;
好了,这个属性差不多讲完了,大家只要画个表格试一下,就都OK啦。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值