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

　　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. NLP入门（九）词义消岐（WSD）的简介与实现

    词义消岐简介   词义消岐,英文名称为Word Sense Disambiguation,英语缩写为WSD,是自然语言处理(NLP)中一个非常有趣的基本任务.   那么,什么是词义消岐呢?通常,在我们 ...

  2. Vue 从入门到进阶之路（十二）

    之前的文章我们介绍了一下 vue 中插槽的使用,本章我们接着介绍一下 vue 中的作用域插槽. <!DOCTYPE html> <html lang="en"&g ...

  3. 拥抱webpack4，有效缩减构建时间57%+

    背景 最近有感觉到,随着系统模块数量的增加,wepack编译打包的速度越来越慢,于是我想给项目做一下优化升级,也借此机会系统地学习一下webpack4. 升级过程 当前版本 "depende ...

  4. Mybatis的原理分析1(@Mapper是如何生效的)

    接着我们上次说的SpringBoot自动加载原理.我们大概明白了在maven中引入mybatis后,这个模块是如下加载的. 可能会有人问了,一般我们的dao层都是通过Mapper接口+Mapper.x ...

  5. .net core 拦截器的使用

    .net core 拦截器的使用 实例代码:https://gitee.com/D_C_L/InterceptorTest.git 拦截器主要是将程序中的一些可以独立出去的模块进行拦截,比如幕等性,和 ...

  6. iOS关于制作动画运动轨迹（UIBezierPath介绍）

    参考链接: https://www.jianshu.com/p/6c9aa9c5dd68

  7. Android 中的style和Theme的使用

    说明 style和theme的定义是为了改变原有系统设定的默认窗体.字体.背景色.格式等风格而使用.其本质就是系统属性的集合.本篇主要介绍android中的style和theme的具体用法. styl ...

  8. 团队项目之需求改进&系统设计

    小组:BLACK PANDA 需求&原型改进   20分 需求&原型改进: https://git.lug.ustc.edu.cn/black-panda/mblogs_plan/bl ...

  9. 单词倒序(java)

    如何将一串单词组成的字符串倒序呢?如:" we go to school" 变成"school to go we "java代码实现: public stati ...

  10. axel 多线程下载工具

    yum install axel-2.4-9.el7.x86_64 -y # 选项 --max-speed=x , -s x 最高速度x --num-connections=x , -n x 连接数x ...