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. spring+mybatis多数据源动态切换

    spring mvc+mybatis+多数据源切换 选取oracle,mysql作为例子切换数据源.oracle为默认数据源,在测试的action中,进行mysql和oracle的动态切换. web. ...

  2. GJM : Unity3D HIAR 目录导航

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  3. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...

  4. jQ图片列表光标移动动画

    本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 效果展示: http://hovertree.com/texiao/jquery/88/ 效果图如下: 其中的jQ ...

  5. SAP CRM 使用Javascript触发SAP Server Event

    原文地址:How To Trigger SAP Server Event With Javascript 本文地址:http://www.cnblogs.com/hhelibeb/p/5977921. ...

  6. HTML5-电影影评网

    学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例.自我感觉良好.下面我来展示一下图片 这是我浏览其他网站的时候以为发现的新功能可以运行代码,这是运行之后截得图片.自我感觉照片还是蛮高大上 ...

  7. Eclipse for Java EE软件操作集锦（一）

    以下是我在Java网站开发过程中,关于软件操作Eclipse中,遇到的一些问题并提供了解决方案.一.java web开发使用的集成开发工具是eclipse for Java EE 官方下载地址:htt ...

  8. 12、产品经理要阅读的书籍 - IT软件人员书籍系列文章

    产品经理是软件产品的主要领导者.不同于项目经理,产品经理是对产品负责,更多的是负责产品的设计定型:而项目经理则对项目负责,更多的是负责项目软件的实现.产品经理的一些工作,和项目经理是一致的,比如需求分 ...

  9. 1.2 - C#语言习惯 - 用运行时常量readonly而不是编译期常量const

    C#中有两种类型的常量:编译期常量和运行时常量.二者有着截然不同的行为,使用不当将会带来性能上或正确性上的问题. 这两个问题最好都不要发生,不过若难以同时避免的话,那么一个略微慢一些但能保证正确的程序 ...

  10. win8改win7笔记

    内存<=4G,选32位(×86)   内存>=4G,选64位(×64)   (非必须) BIOS设置    USB Boot Support     Disabled改为Enabled(如 ...