订单拆单在电商网站建设,网站域名备案查询官网,wordpress主题分享,南京网站开发个人显示省略号的前提#xff1a;必须有指定宽度
一、单行文本超出部分显示省略号
属性取值解释overflowhidden当内容超过盒子宽度, 隐藏溢出部分white-spacenowrap让文字在一行内显示, 不换行text-overflowellipsis如果溢出的内容是文字, 就用省略号代替
.one-line{overflow:h…显示省略号的前提必须有指定宽度
一、单行文本超出部分显示省略号
属性取值解释overflowhidden当内容超过盒子宽度, 隐藏溢出部分white-spacenowrap让文字在一行内显示, 不换行text-overflowellipsis如果溢出的内容是文字, 就用省略号代替
.one-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
二、多行文本超出部分显示省略号
属性取值解释overflowhidden当内容超过盒子宽度, 隐藏溢出部分text-overflowellipsis如果溢出的内容是文字, 就用省略号代替display-webkit-box必须设置盒子属性为-webkit-box-webkit-line-clamp2、3、4… 设置超出几行后超出部分显示省略号 注这是一个不规范的属性unsupported WebKit property -webkit-box-orientvertical盒子实现多行显示的必要条件文字垂直展示word-breakbreak-all 单词破坏主要用于破坏英文单词的整体性即在英文单词还没有在一行完全展示时就换行。 简单的理解就是一个单词可能会被分成两行展示
.two-line{overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;-moz-box-orient:vertical;word-break: break-all;
} 说明
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。
