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. 浅谈HTTP协议(上)

    今天讨论一下HTTP协议.一个做前端的,如果连HTTP协议都不了解,那实在是太不合格了. 首先,什么是HTTP?Hyper Text Transfer Protocol(超文本传输协议),用在浏览器和 ...

  2. Centos6下rpm安装MySQL5.6

    Centos6在rpm安装 rpm -ivh http://dev.mysql.com/get/mysql-community-release-el6-5.noarch.rpm yum install ...

  3. float浮动深入理解

    [CSS深入理解之float浮动]听课总结 (http://www.imooc.com/learn/121)   1.float的原本作用:为了实现文字环绕 2.float的包裹性和破坏性: 包裹性: ...

  4. hdu ----3695 Computer Virus on Planet Pandora (ac自动机)

    Computer Virus on Planet Pandora Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 256000/1280 ...

  5. Yii MySQL修改数据库的数据

    最新学习Yii框架,分享一些学习心得,适合初学者,大神请按ctrl + w //第一种方法 <?php /* * $id 代表主键,可以是一个也可以是一个集合. * $attributes 代表 ...

  6. MongoDB整库备份与还原以及单个collection备份、恢复方法

    mongodb数据库维护离不开必要的备份.恢复操作,而且一般不会出错,所以我们在使用的时候大部分时候使用备份和恢复操作就可以了   mongodump.exe备份的原理是通过一次查询获取当前服务器快照 ...

  7. android代码嵌入html代码

    有时候需要在一个TextView控件中设置两种不同颜色的字体,这时候可以使用Html.fromHtml方法实现 例如: tvTaskDesc.setText(Html.fromHtml("当 ...

  8. logcat的条数设置

    在软件默认设置下,logcat的缓存为1024,即logcat显示的条数有限,给程序的调试带来很大的不便,通过设置 logcat缓存的大小,可以增加logcat显示的条数,将程序调试的输出都可以打印出 ...

  9. Rhel6-mysql_cluster配置文档

    MySQL Cluster 是一种技术,其主要功能是在无共享的相关系统中部署内存中数据库 的 Cluster .在通过无共享体系结构,系统能够使用廉价的硬件,而且对软硬件无特殊要求. 此外,由于每个组 ...

  10. 模拟jquery实现each方法和map方法

    ********************each方法********************** function each( obj, cbk ) { /* * 实现思路: * 1.首先却分传入进来 ...