单行文本溢出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行文本显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

但是你会发现有的浏览器设置上-webkit-box-orient: vertical; 不起作用

解决方式如下

/* autoprefixer: off */

  -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776

  /* autoprefixer: on */
通过腻子来实现生效

div或者p标签单行和多行超出显示省略号的更多相关文章

  1. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  2. Html中文字过多，单行超出和多行超出显示省略号

    本博客主要介绍 前端开发中文本过多,以省略号显示. 效果如图:                单行: <!--单行--> <p class="pl">这个属 ...

  3. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  4. css实现多行超出显示省略号？

    可以实现,但是用的是-webkit-私有属性.我用js已经解决了.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-over ...

  5. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  6. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  7. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  8. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  9. 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法

    文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap;  强制文本不换行 折 ...

随机推荐

  1. iPhoneSE2要在印度独家生产真得没戏？

    现在,关于iPhone SE2的消息层出不穷,总的来说,它是一款真实存在的手机,整体性能和iPhone5X/SE相似,大概可能差不多会加上一些"无线充电"之类的无聊功能.普通消费者 ...

  2. PHP生成word文档的三种实现方式

    PHP生成word原理 利用windows下面的 com组件 利用PHP将内容写入doc文件之中 具体实现: 利用windows下面的 com组件 原理:com作为PHP的一个扩展类,安装过offic ...

  3. 华为VS小米 营销手段有待继续强化

    营销手段有待继续强化" title="华为VS小米 营销手段有待继续强化"> 对于大多数来说,希望看到强者愈强的戏码.比如:NBA里的N场连胜.苹果帝国千秋万载一统 ...

  4. AI能帮我们造出一个无肉的世界吗？

    AI听起来很遥远,其实已经渗透到我们的日常工作和生活中.在不远的未来,互联网.大数据.硬件的发展和软件的优化,乃至全社会的参与,人工智能将真正从实验室走进生活,它将成为改变我们生活的一部分.我们吃的肉 ...

  5. linux记录每次登陆的历史命令

    编辑/etc/profile,增加如下代码 #Record history operation USER_IP=`>/dev/null |awk '{print $NF}' |sed -e 's ...

  6. Nginx_安装

    1. 安装步骤 上传nginx上传nginx安装包到linux 安装gcc 1 yum -y install gcc-c++ gcc 查看是否安装gcc: 1 gcc -v 安装依赖库 1 yum - ...

  7. Gradle的依赖方式——Lombok在Gradle中的正确配置姿势

    写过java的都知道,lombok几乎在项目中处于不可或缺的一部分,但是lombok在Gradle的项目中配置并非人人都知道. 很多人在项目依赖中直接这样写 1 compile "org.p ...

  8. -scp Linux之间复制文件和目录

    scp 简介 scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速 ...

  9. LeetCode 232题用栈实现队列（Implement Queue using Stacks） Java语言求解

    题目链接 https://leetcode-cn.com/problems/implement-queue-using-stacks/ 题目描述 使用栈实现队列的下列操作: push(x) -- 将一 ...

  10. C语言程序设计100例之（31）：全排列问题

    例31   全排列问题 题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入格式 n(1≤n≤9) 输出格式 由1-n组成的所有不重复的数字 ...