CSS之换行

    xiaoxiao2021-03-26  27

    都说前端的东西多,难记,不说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啦。
    转载请注明原文地址: https://ju.6miu.com/read-650191.html

    最新回复(0)