css控制超出宽度 ...展示

简介: css控制超出宽度 ...展示

当一行文本或者多行文本超过设计图宽度或者高度得时候,可以将超过得部分通过...的形式进行省略,有多种方法:1、使用JS的字符串截图 2、使用css进行操作。

一行时

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

多行时

当文本有多行的时候可以通过line-clamp属性进行设置超过的行数进行控制

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

截取效果

网络异常,图片无法展示
|

当然JS使用 字符串截取也可以,只不过 css相对更加方便。

目录
相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
4月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
29 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
4月前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
40 2
|
4月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
39 2
|
5月前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
6月前
|
前端开发
CSS关于默认宽度
CSS关于默认宽度
|
6月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
110 0
|
6月前
|
存储 前端开发
CSS3媒体查询实现不同宽度的下不同内容的展示
CSS3媒体查询实现不同宽度的下不同内容的展示
63 0
|
前端开发
不知道宽度和高是多少,实现水平垂直居中(css)
不知道宽度和高是多少,实现水平垂直居中(css)
|
前端开发 容器
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度,并按比例显示
696 1

热门文章

最新文章