以前我在面试中遇到过这个问题,当时没答上来,现在回答一下:

  1.设置三个属性:

    overflow:hidden   (超出部分隐藏)

white-space:nowrap    (强制不换行)

text-overflow:ellipsis     (文本超出用三个省略号代替)

  

  2.代码部分截图:

  

  3.最终效果:

  

css文本超出部分用省略号表示的更多相关文章

  1. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  2. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  3. css 文本超出范围显示省略号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  5. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  6. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  7. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  8. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  9. css/js 超出部分显示省略号

    1.js方法 function cutString(str, len) { //length属性读出来的汉字长度为1 if (str.length * 2 <= len) { return st ...

随机推荐

  1. Springboot异常处理和自定义错误页面

    1.异常来源 要处理程序发生的异常,首先需要知道异常来自哪里? 1.前端错误的的请求路径,会使得程序发生4xx错误,最常见的就是404,Springboot默认当发生这种错误的请求路径,pc端响应的页 ...

  2. GitLab CI/CD持续集成设置

    GitLab CI/CD持续设置 官方文档地址(https://docs.gitlab.com/ee/ci/README.html) GitLab CI.CD功能非常完善,只需要简单几步,就可以完成项 ...

  3. 网站报"组策略阻止了这个程序。要获取详细信息,请与系统管理员联系。"错误。

    今天将一个测试的网站发布到阿里云虚拟主机后,访问网站报“组策略阻止了这个程序.要获取详细信息,请与系统管理员联系.”错误.如下: 但是这个错误在本地调试时是没有的. 经过调查,原来罪魁祸首是 Micr ...

  4. JavaWeb问题记录——SessionIdGeneratorBase.createSecureRandom

    JavaWeb问题记录——SessionIdGeneratorBase.createSecureRandom 摘要:本文主要记录了在启动Tomcat时,出现的一个警告以及解决办法. 部分内容来自以下博 ...

  5. HTML实例之搜索栏(附源码)

    1. 简书类 实现效果 html代码 <div class="container"> <form action="" class=" ...

  6. iOS中数组的倒序、升序、降序

    NSMutableArray *array = [NSMutableArray arrayWithObjects:",nil]; // 倒序 NSMutableArray *resultAr ...

  7. 【JDBC】工具类的抽取

    jdbc.properties属性文件 driverClass=com.mysql.jdbc.Driver url=jdbc:mysql:///jdbctest username=root passw ...

  8. ODA: After Apply ODA 12.2.1.2.0 Patch, Unable to Create TableSpace Due to [ORA-15001: diskgroup "DATA" does not exist or is not mounted | ORA-15040: diskgroup is incomplete] (Doc ID 2375553.1)

    ODA: After Apply ODA 12.2.1.2.0 Patch, Unable to Create TableSpace Due to [ORA-15001: diskgroup &quo ...

  9. Memcached 基本语法 记录

    set 命令:命令将value数值存储在指定的key中: set key flags exptime bytes [noreply] value key:键值 key-value 结构中的 key,用 ...

  10. txt换行追加写入

    with open(negative_txt, 'a') as f: patch_name1 = patch_name + '\n' f.write(patch_name1)