如果只显示一行,则可以使用以下方法:

  overflow: hidden;

  text-overflow:ellipsis;

  white-space: nowrap;

如果需要显示多行,在需要设置的元素style中添加以下代码:

  word-break: break-all;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

(注意:有时添加在嵌入样式中不生效,需要添加在行内样式中)

设置前效果:

设置后效果:

css设置文字多余部分显示省略号的更多相关文章

  1. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  2. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  3. css如何简单设置文字溢出盒子显示省略号

    1.单行文本溢出显示省略号单行文本溢出显示省略号,必须满足三个条件:(1)先强制一行内显示文本white-space:nowrap;(默认 normal自动换行)(2)超出的部分隐藏overflow: ...

  4. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  5. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

  7. CSS设置文本末行显示省略号...

     首先设置文本标签或文字所在标签的宽度   最主要是以下三点:        ①white-space:nowrap;如果是中文需要设置行末不断行       ②overflow:hidden;设置控 ...

  8. css实现文字过长显示省略号的方法

    <div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取. ...

  9. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

随机推荐

  1. linux 常用指令

    w 指令可以看到目前接入到服务器的用户(终端)history xx 可以查看本用户(本终端)最后执行的xx条指令last 指令可以查看登录的日志grep "str" filName ...

  2. Kotlin 使用类似C# 的yield功能

    用过c#的可能对 yield 关键字爱不释手,那么在像我这种被迫上java贼船的人,就想找到类似的功能. 我使用的是kotlin,下面的方法演示了产生一个序列的功能. val fibonacciSeq ...

  3. 【算法】祭奠spfa 最短路算法dijspfa

    题目链接 本题解来源 其他链接 卡spfa的数据组 题解堆优化的dijkstra 题解spfa讲解 来自以上题解的图片来自常暗踏阴 使用前向星链表存图 直接用队列优化spfa struct cmp { ...

  4. python web1(解析url)

    环境:pycharm 尝试对地址进行切片 去掉头 http 或 https a.遇到了一些问题 url = 'https://www.cnblogs.com/derezzed/articles/811 ...

  5. JSP页面传值出现中文乱码的问题

    在接收值的jsp页面代码的body里添加: <%request.setCharacterEncoding("utf-8"); %>  //这里是设置utf-8为jsp页 ...

  6. YML文件中ipv6地址输入格式

    关于YML文件格式可以百度,这里只说ipv6:yml文件是注重格式的不能用tab键代替空格 ipv4 :10.1.202.9 ipv6: 2001:202::6e4:f32b:c19c:4760 端口 ...

  7. webAR涉及的技术

    1.技术体系 1.1技术体系整理   其中绿色底色的代表Demo中表现出的能力比较成熟,可以直接应用.   脑图地址:http://naotu.baidu.com/file/3392a895a9039 ...

  8. React 的坑

    MemoryRouter 会缓存组件,导致有时候 componentDidMount 不会执行

  9. PHP调用Python接口过程中所遇到的问题

    在php调用python脚本时,首先把python相关组件安装完善.用Python命令检测运行脚本而不报错. 在调用接口的过程 1.没有打开的python脚本的权限 解决办法:把python脚本所在的 ...

  10. 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456:

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- from functools import reduce CHAR_TO_INT = { ': 0, ': ...