<div class="title">当对象内文本溢出时显示省略标记</div>

这是一个例子,其实我们只需要显示如下长度:

css实现网页中文字过长截取...

title class应该这样写:

.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

说明:

1、宽度一定要设置,可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:

clip:不显示省略标记(...),而是简单的裁切。
ellipsis:当对象内文本溢出时显示省略标记(...)

4、overflow:hidden表示溢出内容为隐藏。

css实现文字过长显示省略号的方法的更多相关文章

  1. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

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

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

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

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

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

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

  5. css 实现文字过长变成省略号(包含单行的and多行的)

    单行的比较简单  但是必须条件同时满足 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: ...

  6. css设置文字多余部分显示省略号

    如果只显示一行,则可以使用以下方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 如果需要显示多行,在需要设置的元素s ...

  7. css实现文字内容超出显示省略号

    white-space: nowrap; /* 内容超出容器宽度时强制不换行 */ overflow: hidden; /* 内容超出容器时隐藏超出部分 */ text-overflow: ellip ...

  8. css对于文字过长加省略号

    overflow: hiddentext-overflow: ellipsiswhite-space: nowrap

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

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

随机推荐

  1. mysql 视图/触发器/函数

    一.视图 作用:简写代码,与临时表的作用差不多 .创建 create view 视图名 as SQL语句 .修改 alter view 视图名 as 新SQL语句 .删除 drop view 视图名 ...

  2. Qt Installer Framework翻译(5-3)

    推广更新 创建在线安装程序,以便能够向安装产品的用户推广更新. 为了推广更新,需要执行以下步骤: 将待更新内容复制到package文件夹. 在package.xml文件中增加待更新组件的元素的值. 使 ...

  3. Mysql 8+ 版本完全踩坑记录

    问题是这样 刚霍霍了一台腾讯云服务器需要安装mysql 然后就选择了8+这个版本. 安装步骤网上有的是. 我只写最主要的部分 绝对不出错 外网可访问 .net java都可以调用 其实不指望有人看 就 ...

  4. Mac 查看端口占用情况及杀死进程

    查看端口占用情况命令 sudo lsof -i :9000 冒号后面就是你需要查看的端口号. TheEternityZhang-MacBook:project zhtony$ sudo lsof -i ...

  5. 学习 lind 语 里的一些组件使用。

    step one autofac : link:http://files.cnblogs.com/files/ganmk--jy/AutofacTest.rar step two 还有很多

  6. 废旧手机改造之给你的手机安装win10系统

    最近又开始琢磨把我这个即将退出的二手手机再利用一下 发现了一个不错的软件 先上图 是不是感觉逼格很高啊 点击下面链接即可下载使用 https://www.lanzous.com/i4gpsib 欢迎交 ...

  7. SpringBoot_Web开发_定制错误数据

    SpringBoot默认的错误处理机制 默认效果: ​ 1).浏览器,返回一个默认的错误页面 2).如果是其他客户端,默认响应一个json数据 原理: ​ 可以参照ErrorMvcAutoConfig ...

  8. ASP.NET MVC4 使用UEditor富文本

    原帖:http://user.qzone.qq.com/369175376/infocenter?ptlang=2052     第一步:先到http://ueditor.baidu.com/webs ...

  9. 移动端ui框架

    https://blog.csdn.net/Robin_star_/article/details/81810197

  10. excle 写入数据库

    龙龙博客:https://www.cnblogs.com/meilong/p/cao-zuoexcel-mo-kuaiopenpyxl.html 1 安装 pip install openpyxl 如 ...