多行文本溢出处理:

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虚拟机—并行回收器(7)

    并行回收器 新生代ParNew回收器 ParNew只是简单地将串行回收器多线程化,他的回收策略,算法以及参数都喝新生代串行回收器一样.由于并行回收器使用多线程进行垃圾回收,因此,在并发能力强的CPU上 ...

  2. JSON 解析与封装

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.解析: var str = '{"name":"huangxiaojian&qu ...

  3. cf113D. Museum(期望 高斯消元)

    题意 题目链接 Sol 设\(f[i][j]\)表示Petya在\(i\),\(Vasya\)在\(j\)的概率,我们要求的是\(f[i][i]\) 直接列方程高斯消元即可,由于每个状态有两维,因此时 ...

  4. js的style.display小问题

    在元素添加class样式隐藏display:none; 使用console.log(xx.style.display);//空值

  5. 小记SharePoint REST API Search和COM

    1.管理员身份Visual Studio,新建类项目 SPCOM 2.编写逻辑实现代码 重点关注搜索结果的属性包括: Title,Author,Path,Description,HitHighligh ...

  6. 自定义适用于手机和平板电脑的 Dynamics 365(三):显示的实体

    您可以启用 适用于手机的 Dynamics 365 和 适用于平板电脑的 Dynamics 365 的有限实体集. 若要查看是否启用了实体,或者要启用实体,请单击“设置”>“自定义”>“自 ...

  7. Laravel安装教程

    1.Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length() 报这个错是因为Apache/bin目录下 l ...

  8. Oracle表字段的增删改和重命名

    增加字段语法:alter table tablename add (column datatype [default value][null/not null],….); 说明:alter table ...

  9. 【转】qt-vs-addin:Qt4和Qt5之VS插件如何共存与使用

    原则上,两者是不可以同时存在的,但是如果都安装了,该如何分别使用他们呢? Qt4 Visual Studio Add-in:官网可以下载安装程序,qt-vs-addin-1.1.11-opensour ...

  10. LeetCode题解之 3Sum

    1.题目描述 2.问题分析 使用hashtable 的方法做,解法不是最优的,思路简单直观. 3.代码 vector<vector<int>> threeSum(vector& ...