多行文本溢出处理:

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

单行文本溢出处理:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但如果溢出效果的文本外还有一层 p ,则溢出效果不会显示,如下代码 :

<div>
<p>老师你给是风格顺过饰非色发给</p>
</div>

解决办法是将 p 的 display 设为 inline

css 文本溢出的更多相关文章

  1. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. CSS文本溢出处理方式

    1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...

  5. CSS ... 文本溢出用省略号代替

    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...

  6. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  7. css文本溢出解决方案

    1.普通单行截断省略 overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容) text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space ...

  8. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  9. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. [android] 优酷环形菜单-旋转动画

    获取房子,菜单图标ImageView对象,获取三个圆环RelativeLayout对象 给菜单图标(icon_menu)设置点击事件 定义一个成员变量isLevel3Show来存储第三级菜单是否显示 ...

  2. Java基础——Servlet(四)

    最近一直在学习Servlet,真的有烦躁,一下子要创建好几个文件,服务端.客户端.html页面....学习进度蛮慢的,很容易失掉信心.当学习到cookie时,发现有好多实现是在我们日常生活中可以会遇得 ...

  3. hdu1072(Nightmare)bfs

    Nightmare Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  4. MVC--初步理解(01)

    一.一般意义上的MVC模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为以下三个基本部分: 模型(Model):模型用于封装与应用程序的业务逻 ...

  5. python-策略模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 策略指的就是为了达到某一目的而采取的手段或者方法.为了实现软件设计咪表,对象可能 ...

  6. element-ui Collapse 折叠面板源码分析整理笔记(十)

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  7. SD配置步骤清单

    定义销售组织 定义分销渠道 定义产品组 给公司代码分配销售组织 给销售组织分配销售渠道 给工厂分配销售组织.分销渠道 给销售组织分配产品组 定义销售范围 定义装运点 给工厂分配装运点 维护工厂的装运点 ...

  8. zigzag方式编码

    按以下公式转换: ParameterInteger = (value << 1) ^ (value >> 31) 参数值不支持大于pow(2,31) - 1或-1 * (pow ...

  9. 单表(SSM、SpringBoot、SpringCloud、Freemaker、BootStrap等)

    山门也有门门道道, 开发.测试.安卓...... 小子被纳入MIS小山峰,虽不及BOP势力庞大,高手如云, 仅寥寥七人, 却也于入小山峰之事乐趣至极. 前几日峰主布下一道新手任务, 制作一张单表并运行 ...

  10. ConstraintLayout (约束布局)属性详情

    本文部分内容来自于网络,点击浏览原文 app:layout_constraintLeft_toLeftOf //Constrains the left side of a child to the l ...