<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. git查看远程仓库和本地的区别

    git diff 你可以用 git diff 来比较项目中任意两个版本的差异. $ git diff master..test 上面这条命令只显示两个分支间的差异,如果你想找出 master , te ...

  2. MacOSX 安装 TensorFlow

    TensorFlow是一个端到端开源机器学习平台.它拥有一个包含各种工具.库和社区资源的全面灵活生态系统,可以让研究人员推动机器学习领域的先进技术的. 准备 安装 Anaconda TensorFlo ...

  3. Java入门 - 语言基础 - 16.数组

    原文地址:http://www.work100.net/training/java-array.html 更多教程:光束云 - 免费课程 数组 序号 文内章节 视频 1 概述 2 声明数组变量 3 创 ...

  4. 60 个让程序员崩溃的瞬间,太TM真实了

    前方高能!笑死人不偿命系列~ 表演即将开始,吃东西的请停下来,不然你会后悔的 1. 公司实习生找 Bug 2. 在调试时,将断点设置在错误的位置 3. 当我有一个很棒的调试想法时 4. 偶然间看到自己 ...

  5. test api formdata

  6. Ubuntu16手动安装OpenStack——glance篇--转

    全文转自https://www.voidking.com/dev-ubuntu16-manual-openstack-glance/ 目标 紧接着<Ubuntu16手动安装OpenStack—— ...

  7. 使用Airtest进行UI自动化测试

    一.环境搭建 1.Airtest客户端下载 访问官网http://airtest.netease.com/,根据自己的系统下载相应的客户端安装: 2.python工具下载与环境搭建 在本地python ...

  8. 小程序--->scroll-view组件不能触发相应滚动事件

    小程序scroll-view组件不能触发相应滚动事件 在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚 ...

  9. C语言作业12—学期总结

    一.我学到的内容 二.我的作业及收获 我的作业: 第一次作业 第二次作业 第三次作业 第四次作业 第五次作业 第六次作业 第七次作业 第八次作业 第九次作业 第十次作业 第十一次作业 我的收获: 转眼 ...

  10. 利用http协议使用普通的网站虚拟主机+安信可A6C GPRS模块实现对stm32的远程升级

    步骤: 1.生成bin文件并将bin文件放到虚拟主机目录内 2.做一个php的页面分块读取该bin文件,以asc字符echo出来,并标记好头尾长度和校验. 3.GPRS协议栈连接主机路径,收到内容,将 ...