FFan丶Blog / CSS / / CSS自动隐藏超出宽度的内容

CSS自动隐藏超出宽度的内容

分类:CSS 发布时间:2020-04-13 13:31:24来源:FFan丶Blog
一般的文字截断(适用于内联与块):.text-overflow {     display:block;/*内联对象需加*/     width:31em;/*指定宽度*/     word-break:keep-all;/* 不换行 */...

一般的文字截断(适用于内联与块):

.text-overflow {
    display:block;/*内联对象需加*/
    width:31em;/*指定宽度*/
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* IE 专有属性,当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的处理:

table{
     width:30em;
     table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
 }
 td{
     width:100%;
     word-break:keep-all;/* 不换行 */
     white-space:nowrap;/* 不换行 */
     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
     text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
 }

猜你喜欢

  • if(location.toString().indexOf("abc.com") <= -1)     /*如果当前网址中没有abc.com*/ { document.location.href="/b.htm";   /*跳转到b.htm*/ } else

    部分JS效果2020-08-24
  • 在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。 语法: transform: scaleX(x);         /*沿X轴方向缩放*/ transform: scaleY(y);         /*沿Y轴方向缩放*/

    CSS2021-04-14
  • sql替换语句,用该命令可以整批替换某字段的内容,也可以批量在原字段内容上加上或去掉字符。 命令总解:update 表的名称 set 此表要替换的字段名=REPLACE(此表要替换的字段名, '原来内容', '新内容')

    数据库2021-05-19
  • 新建一个目录名为sitemap的栏目,然后从 /template/tools/ 中复制一个名为 sitemap.baidu.htm 的ICMS自带网站地图XML模板,到自己的模板文件夹中,然后去ICMS系统后台,为前面新建的sitemap栏目,列表模板调用该 sitemap.baidu.htm 模板文件。

    ICMS2021-06-03
  • <video>的基本属性: preload: (预加载)iPhone支持,Android不一定支持; poster: (封面图片)iPhone支持,Android不一定支持; autoplay: (自动播放)iPhone中的Safari不支持,webview可能被开启。Android不一定支持;

    html相关标签2021-09-01