单行文本溢和多行文本溢出

一、单行文本溢出

最常见的使用，直接贴出代码：

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

二、多行文本溢出

1. 基于谷歌浏览器实现：

.text {display: -webkit-box;-webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */-webkit-line-clamp: 3; /* 限制文本的行数，表示文本第多少行省略 */text-overflow: ellipsis;/*  打点展示 */overflow: hidden;/*超出部分进行隐藏*/}

缺点：看前缀就知道，兼容性不好，此时，如果你的 .text 容器存在内边距，你会发现，虽然指定行数有打点显示，但是应该要被省略的部分，还会显示出来。

那么产生以上显示结果的原因是什么呢？当我们选中浏览器盒模型的 padding 部分时，你会发现：

因此，我们可以很容易知道，由于我们加的内边距使得我们的内容没有办法超过对应的容器高度，特别是你没有给容器设置高度的时候，换句话说：内容没有超出父容器的范围，因此，overflow: hidden 的作用就失效了。

2. 兼容性写法

- 使用绝对定位的方式：

1. 重点：line-height / height = 1 / n , 也就是我们这样去定义之后，如果我们想要显示 3 行文本打点显示，那 height = 3 x （line-height)
2. 注意：要明确知道我们的 “ … ” 什么时候应该要显示什么时候不要显示，由于我们这样的设置 “…” 会一直存在，当我们的内容根本没有达到需要打点显示的条件，那就不应让它出现

   .text {position: relative;line-height: 1em;height: 3em;overflow: hidden;}.text::after{position: absolute;right: 0;bottom: 0;width: 1.2em;text-align: center;content: "...";background-color: #fff;}

单行文本溢和多行文本溢出相关推荐

[css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
单行文本省略号和多行文本省略号
1.单行文本省略号 overflow:hidden; //多余的部分隐藏 white-space:nowrap; //让文字强制一行显示 text-overflow:ellipsis; //多余的部分 ...
单行文本垂直居中和多行文本垂直居中以及font字体
单行文本垂直居中 <style>*{margin: 0;padding: 0;}.box{width: 300px;margin: 20px auto 0;border: 1px soli ...
单行文本省略和多行文本省略
单行文本省略 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本省略 display: -webkit-box; - ...
css：实现文本两行或多行文本溢出显示省略号
div{display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;word-wrap: break-word; w ...
单行文本溢出省略和多行文本溢出省略
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS多行文本溢出省略号...显示设置
单行文本溢出... .text-over{width:200px;overflow: hidden;text-overflow:ellipsis;//文本溢出显示省略号white-space:nowr ...
20 Flutter TextField单行文本和多行文本
TextField单行文本框和多行文本框 1.TextField --------基本等价于Android中EditText,其中属性都有很多一致 1.属性 const TextField({ K ...
HTML语言中文本框属性,单行文本框属性有哪些
html里的input文本框怎样单行变多行多行的就不能使用Input了.需要使用textarea标签属性: textarea代表html的单多行输入域 html多行输入框 tyle="OV ...

单行文本溢和多行文本溢出

一、单行文本溢出

二、多行文本溢出

1. 基于谷歌浏览器实现：

缺点：看前缀就知道，兼容性不好，此时，如果你的 .text 容器存在内边距，你会发现，虽然指定行数有打点显示，但是应该要被省略的部分，还会显示出来。

2. 兼容性写法

- 使用绝对定位的方式：

单行文本溢和多行文本溢出相关推荐

最新文章

热门文章

单行文本溢 和 多行文本溢出

一、单行文本溢出

二、多行文本溢出

1. 基于谷歌浏览器实现：

缺点：看前缀就知道，兼容性不好，此时，如果你的 .text 容器存在 内边距，你会发现，虽然指定行数有打点显示，但是应该要被省略的部分，还会显示出来。

2. 兼容性写法

- 使用绝对定位的方式：

单行文本溢 和 多行文本溢出相关推荐

最新文章

热门文章

单行文本溢和多行文本溢出

缺点：看前缀就知道，兼容性不好，此时，如果你的 .text 容器存在内边距，你会发现，虽然指定行数有打点显示，但是应该要被省略的部分，还会显示出来。

单行文本溢和多行文本溢出相关推荐