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. Eclipse 日期和时间格式自定义

    点击下载Eclipse插件  org.eclipse.text_3.5.300.v20130515-1451.jar  覆盖下图所示的jar文件. /************************* ...

  2. PowerDesigner 常用设置

    1.使用 JDBC 方式连接 Oracle 逆向生成数据库 PDM 使用 ODBC 方式连接 Oracle 数据库可以借鉴这位兄弟的博客:http://www.cnblogs.com/clivehua ...

  3. sass安装

    第一步:下载ruby http://www.ruby-lang.org/zh_cn/downloads/ 第二步:安装ruby http://www.ruby-lang.org/zh_cn/docum ...

  4. MYSQL基础操作之单表的增删改查

    一.添加数据. -- 1.创建表,并插入一定的数据. CREATE TABLE STUDENT( ID INT, USERNAME ), SERVLET INT, JSP INT, ADDRESS ) ...

  5. ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩

    网站开启 Gzip 压缩的好处相信很多人都已经清楚,这样做可以提高网站的性能.那么为什么很多网站没有开启 Gzip 压缩功能呢?原因有4点:防病毒软件.浏览器 bug.网站代理和服务器未配置. 使用 ...

  6. Java 消息摘要 散列 MD5 SHA

    package xxx.common.util; import java.math.BigInteger; import java.security.MessageDigest; import jav ...

  7. python处理json和redis hash的坑

    1.使用MySQLdb读取出来的数据是unicode字符串,如果要写入redis的hash中会变成 "{u'eth0_outFlow': 2.5, u'eth1_inFlow': 3.44} ...

  8. DOS下windows系统查看wifi密码

    DOS下windows系统查看wifi密码 首先,按win+R键,win键如下 弹出框中输入cmd 在弹出界面输入 netsh wlan show profiles 你可以看到你链接过的所有wifi名 ...

  9. vi(vim)键盘图及其基本命令

    进入vi vi filename                打开或新建文件,并将光标置于第一行首 vi +n filename           打开文件,并将光标置于第 n行首 vi + fi ...

  10. Ubuntu15.10下华南师大锐捷认证客户端的使用详解

    本文测试Linux系统环境为Ubuntu15.10 Destop,暂未在其他系统下验证过,不代表LTS版本或较旧的版本按照本文所述方法可以100%正确使用最新的锐捷认证客户端. 本文面向对象为华南师范 ...