每门语言总有那么一些不太常用，却又不可或缺的语法操作。下面说一下，在HTML文件中，如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。

以下是HTML的主体代码:

　　　　　　　　

　　首先，中文是默认行末自动换行的。而英文和数字，主流浏览器一般默认为空格处换行。上图，我们先编写2段字符。然后CSS代码见下图：

　　　　　　　　  

　　见上图，设置div的大小使其装不下字符，然后对字符设置不断行。这样文字会超出div显示，然后overflow：hidden；让超出部分隐藏不显示，

然后 text-overflow：ellipsis；或者 text-overflow：clip；分别设置隐藏部分用 省略号或剪切效果显示。

超出区域文字显示为省略号或者剪切效果——CSS的生僻操作的更多相关文章

  1. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. css怎样让HTML中超出的内容显示为省略号

    文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...

  3. CSS小技巧-怎样让每行多余的文字显示文省略号？

    1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis

  4. CSS控制文字显示一行，超出显示省略号

    这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...

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

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

  6. js实现多行文本超出一定字数显示省略号功能

    最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...

  7. td默认文字超出后显示..，点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  8. 微信小程序之canvas 文字断行和省略号显示

    文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='wor ...

  9. Android 文字过长TextView如何自动截断并显示成省略号

    当用TextView来显示标题的时候,如果标题内容过长的话,我们不希望其换行显示,这时候我们需要其自动截断,超过的部分显示成省略号. 如下图所示,标题过长,自动换行了,显示不是很好看. 这时候我们需要 ...

随机推荐

  1. ubuntu下Xmodmap映射Esc和Ctrl_L

    一般来说,用Vim.Emacs的人,都会有做键盘映射的想法 我当然也是,开始学习Vim的时候,就觉得,把Esc键放在左上角, 是一件很SB的事情,稍微大一点的键盘,手指必须要离开位置才能按到Esc键, ...

  2. 非常完整的PHP的mysql类

    非常完整的PHP的MySQL操作类, 即使PDO, ActiveRecord, ORM, 框架, Framework… 都不如这个强大和好用. 有了它, 你就不会再需要任何MySQL封装了,此类已经在 ...

  3. Struts框架中struts-config.xml文件配置小结

    弄清楚struts-config.xml中各项元素的作用,对于我们构建web项目有莫大的好处.<struts-config>是struts的根元素,它主要有8个子元素,DTD定义 如下: ...

  4. Xcode 使用技巧

    Xcode 之 设置文件生成时的模板 Xcode 之 修改 Create by Xcode 之 添加前缀 Xcode 之 alcatraz (插件管理器) Xcode 之 重构功能 Xcode 之 s ...

  5. 结合social relationship的推荐系统（持续更新）

    最近看了一些结合社会关系的推荐系统,把论文罗列一下: (TidalTrust) Generating predictive movie recommendations from trust in so ...

  6. MySQL XtraBackup备份脚本

     #backup.sh #!/bin/sh #on xtrabackup 2.1.8 # 第一次执行它的时候它会检查是否有完全备份,否则先创建一个全库备份 # 当你再次运行它的时候,它会根据脚本中的设 ...

  7. javascript实现页面滚屏效果

    当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个 ...

  8. web前端性能调优（二）

    项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...

  9. PHP的一些天坑

    什么叫天坑.天呐,原来这么坑,不知则已,细思极恐. 一.小数(符点数)不能直接比较是否相等 比如 if( 0.5+0.2==0.7 ) 的结果是 false.究其原因是因为,PHP是基于C语言的,而C ...

  10. linux - tar命令简单使用

    tar 新建一个tar文档 touch file1 touch file2 mkdir dir1 touch dir1/file3 # 普通tar文档 tar -cf tar-file.tar fil ...