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. 软件测试--测试Demo

    视频地址(第二课时):https://pan.baidu.com/s/1gfLVC2n 软件安装好了! 软件默认的浏览器是火狐. 如果需要IE,chrome,都在前一篇的安装包里有. 测试结果 视频里 ...

  2. HTTP状态码及其含义

    下表显示了常见的HTTP 1.1状态代码以及它们对应的状态信息和含义.应当谨慎地使用那些只有HTTP 1.1支持的状态代码,因为许多浏览器还只能够支持HTTP 1.0.如果你使用了HTTP 1.1特有 ...

  3. 如何低成本的打造HTC Vive虚拟演播室直播MR视频？

    http://m.toutiao.com/i6298923859378700802/?tt_from=weixin&utm_campaign=client_share&from=gro ...

  4. 用Application和Session统计在线人数[转]

      在Global.asax全局变量文件中,修改其中的 Session_Start 和 Session_End 方法:代码如下: protected void Session_Start(object ...

  5. C# 跨线程调用控件

    在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应.  同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...

  6. dll的编写和使用

    备忘: 1-1: def方式创建:VC6找不到stdafx.h,所以创建空工程,stdafx 里面功能太高端,不用不影响.DLL工程建立好后,新建一CPP文件,叫dlltest.cpp,直接去copy ...

  7. android 使用相机拍照，并存储到手机sd卡上，并利用系统录像录像并播放

    //首先声明一个成员变量 String savePath,用来储存文件路径 /** * 保存照片路径 * @return 返回图片的一个文件 * @throws IOException 抛出一个异常 ...

  8. 《大象-Think In UML》读书笔记3

    建模,是指通过对客观事物建立一种抽象的方法用以表征事物并过得对事物本身的理解,同时把这种理解概念化,将这些逻辑概念组织起来,构成一种对所观察的对象的内部结构和工作原理的便于理解的表达. 建模包含两个问 ...

  9. Psp个人软件开发软件需求分析及用例分析

    一.需求分析 1.  业务需求 1.1 应用背景 开发项目进度计划总是那么不明确,延期经常出现,甚至无法给出一个相对比较明确的延迟时间.这样给市场的推广会带来很大的影响,不确定因素使得应对十分困难. ...

  10. iOS求职之OC面试题

    1.Objective-C的类可以多重继承么?可以采用多个协议么? 答:不可以多重继承,可以采用多个协议. 2.#import和#include的区别是什么?#import<> 跟 #im ...