white-space: nowrap 不换形

overflow: hidden 隐藏长度超出部分

text-overflow:ellipsis  文字长度超出用省略号代替

<p style="width:300px;line-height:20px;">

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

<span style="display:inline-block;width:50px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">陈小明</span>

</p>

css固定姓名显示长度，排列更整齐的更多相关文章

  1. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  2. css控制文字显示长度，超过用省略号替代

    .line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...

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

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

  4. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

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

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

  6. CSS Display（显示）和Visibility（可见性）

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

  7. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  8. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  9. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

随机推荐

  1. C中的volatile用法

    .volatile的本质: 1> 编译器的优化 在本次线程内, 当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一个寄存器中:以后,再取变量值时,就直接从寄存器中取值:当变量值 ...

  2. 【Asp.net之旅】--数据绑定控件之Repeater

    http://blog.csdn.net/zhang_xinxiu/article/details/21872433

  3. 【转】 HTTP 协议简介

    一.TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应用层分别为:物理层.链路层.网络层.传输层和应用层,如下图所示: 从 ...

  4. location.hash的摘抄

    location.hash详解 去年9月,twitter改版. 一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为 http://twitter.com/us ...

  5. windows防火墙命令详解

    Old command 针对win7以下版本<包含win7> Example 1: 启用一个程序 Old command New command netsh firewall add al ...

  6. Chinese culture

      文房四宝 笔墨纸砚是中国古代文人书房中必备的宝贝,被称为“文房四宝”.用笔墨书写绘画在 中国可追溯到五千年前.秦(前221---前206)时已用不同硬度的毛和竹管制笔:汉代(前206—公元220) ...

  7. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  8. 使用QTP测试Web对象

    加载Web插件先启动QTP,再启动浏览器,否则Web元素识别不了最新版本QTP11支持的浏览器:IE:6.7.8Firefox:3.0.x.3.5.QTP支持直接访问DOM(Document Obje ...

  9. 个人对beta发布的观点

    内容:五个小组的beta发布 时间:2016年11月10日 13:40-15:15 地点:传媒西楼202 发布顺序: 1.飞天小女警(选礼物) 2.金州勇士(在线考试) 3.新蜂(俄罗斯方块) 4.天 ...

  10. ASP.NET MVC ActionResult的其它返回值

    一.ascx页面 场景:要返回代码片断,比如Ajax返回一个子页 我们先新建一个Action public ActionResult Ascx() { return PartialView(); } ...