多行文本溢出处理:

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. Java基本数据类型总结(转载)

    Java基本数据类型总结 基本类型,或者叫做内置类型,是JAVA中不同于类的特殊类型.它们是我们编程中使用最频繁的类型.java是一种强类型语言,第一次申明变量必须说明数据类型,第一次变量赋值称为变量 ...

  2. 卡片游戏(hdu4550)贪心

    卡片游戏 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  3. nginx+tomcat抵御慢速连接攻击

    一.安装nginx apt-get install nginx 安装中途可能会要求填写许可,输入‘y’就好了 如果安装提示“E: Unable to locate package nginx”,那么输 ...

  4. python基础训练题2-元组,字典

    1,判断值在元组中 >>> a = ( 1, 2, 3, 4, 10 ) >>> 10 in a True >>> ' in a False 2, ...

  5. POJ2236(KB5-A)

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 28617   Accepted: 118 ...

  6. python-责任链模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 当你作为一名coder已经快三十却还还没有女朋友,家中父母已经着急万分,此时要求 ...

  7. CSS编辑元素的浮动

    1.元素浮动: 1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right: 2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面:右浮动时,就会附在右侧 ...

  8. Oracle 参数文件及相关操作介绍

    Oracle 参数文件及相关操作介绍 by:授客 QQ:1033553122 1.服务器参数文件 服务器参数文件是一个二进制文件,作为初始化参数的存储仓库.实例运行时,可用ALTER SYSTEM来改 ...

  9. m6c2g核心板使用笔记

    周立功官网资料下载链接:http://www.zlg.cn/ipc/down/down/id/84.html 平台:致远M6G2C-L Cortex-A7工控核心板 主要参考文档:EPC_loT_M6 ...

  10. servlet3.0 web.xml 标头

    <?xml version="1.1" encoding="UTF-8"?> <web-app xmlns="http://java ...