1、首先给用于放文本的标签元素设置一个宽度值，并设置溢出属性overflow为溢出隐藏。

width: 245px;/*一定要设置固定宽度*/

overflow: hidden;/*不显示超过对象尺寸的内容，就是把超出的部分隐藏了*/

2、设置文本缩略的样式为"..."

white-space: nowrap;/*表示文本不会换行，在同一行继续，直到遇到标签为止*/

text-overflow: ellipsis;/*当文本对象溢出是显示...，当然也可是设置属性为clip不显示...*/

CSS实现文字省略的更多相关文章

  1. CSS 实现单行及多行文字省略

    单行文字省略 很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了 .dom{ text-overflow: ellipsis; overflow: hidden; ...

  2. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  3. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  4. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  5. css控制文字长度，超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  6. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

  7. 用CSS让文字居于div的底部

    css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部 ...

  8. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  9. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

随机推荐

  1. Less配置环境

    一.安装Sublime 插件 1.安装Less插件: ctrl+shift+p>install Package>输入less按Enter 2.安装Less2CSS插件:ctrl+shift ...

  2. Office 365使用情况调查不完全分析报告

    感谢大家参与了9月13日在Office 365技术群(O萌)中发起的一个关于Office 365使用情况的调查,在一天左右的时间内,我们一共收到了67份反馈,其中绝大部分是在3分钟内提交的. 本次调查 ...

  3. [tableView reloadData] 和 runloop

    需要[tableView reloadData]后需要立即获取tableview的cell.高度,或者需要滚动tableview,那么,直接在reloadData后执行代码是会有问题的. 断点调试感觉 ...

  4. Android笔记——Android自定义控件

    目录: 1.自定义控件概述 01_什么是自定义控件 Android系统中,继承Android系统自带的View或者ViewGroup控件或者系统自带的控件,并在这基础上增加或者重新组合成我们想要的效果 ...

  5. 关于case语句中声明变量并初始化的注意事项

    今天看到一句对这个问题特别精辟的总结,记录如下: It is possible to transfer into a block, but not in a way that bypasses dec ...

  6. Unsupported major.minor version 51.0错误

    错误原因:用jdk7编译的class文件放到基于jdk6运行在tomcat之中,就会报这个错 解决方法:项目------>右键------>属性------>Java Compile ...

  7. Hive安装（一）之环境配置

    Hive Web Interface(HWI)简介:Hive自带了一个Web-GUI,功能不多,可用于效果展示,如果没有安装Hue的话,是个不错的选择. 由于hive-bin包中没有包含HWI的页面, ...

  8. DIV宽度设置成100%，浏览器窗口缩小后，右边出现留白

    解决办法:给body添加min-width属性

  9. WinCE项目应用之车载导航

    WinCE车载导航系统是我过去几年投入精力比较多的一个项目.我的主要工作内容是BSP的移植.硬件模块的调试和WinCE系统的深度定制.如TDA7415驱动.TDA7415均衡器.慧翰车载蓝牙模块.华为 ...

  10. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...