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. K-邻近算法

    K-邻近算法 采用测量不同特征值之间的距离来进行分类 Ad:精度高,对异常值不敏感,无数据输入假定 Na:计算复杂度高,空间复杂度高 KNN原理 存在样本集,每个数据都存在标签,输入无标签的新数据后, ...

  2. nginx虚拟主机配置

    nginx虚拟主机配置   虚拟主机的概念虚拟主机,就是把一台物理服务器划分成多个"虚拟"的服务器,每一个虚拟主机都可以有独立的域名和独立的目录nginx虚拟主机的配置nginx的 ...

  3. 20161028__严工笔记本安装Win2003

    1.Win2003的PE(不太明白 这里的PE指什么...)不支持 AHCI (会造成 安装的时候 出现 蓝屏) 到 BIOS 里面 把"AHCI"改成"兼容模式(com ...

  4. python 正则表达式总结

    一.匹配元字符 使用元字符可以简便操作,写正则表达式时更方便 常用元字符: . 它匹配除了换行字符外的任何字符,在 alternate 模式(re.DOTALL)下它甚至可以匹配换行  ^ 匹配行首. ...

  5. redis 配置应用（摘）

    Redis可以在没有配置文件的情况下通过内置的配置来启动,但是这种启动方式只适用于开发和测试. 合理的配置Redis的方式是提供一个Redis配置文件,这个文件通常叫做redis.conf. redi ...

  6. 今天的学习——关于JS时间获取方面的小问题

    ①JS获取时间 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1 ...

  7. Windows下Apache的优化

    (1)首选查看apache的工作模式 windows下的查看apache的工作模式命令: httpd -l 如果列出mod_win32.c,则表示是 win32.c 工作方式. 列出的全部内容如下所示 ...

  8. 【USB多路电源】layout

    USB多路电源的layout 图:第一次layout 缺点: 1.散,空间利用率不高: 2.不整齐: 3.没有符合左上进,右下出(当然也不必墨守): 4.输出排针没有放到最边上: 5.信号流向问题 6 ...

  9. Mike的农场 (BZOJ 4177)

    题目大意: 给N个东西分AB类,分到A类和B类分别得到相应的钱记为A[i],B[i],然后有一些冲突关系<x,y,z>,如果物品x,y不同类需要付出z的钱.还有一些外快<S,x,y& ...

  10. AngularJS学习笔记(1)

    <!DOCTYPE html> <html> <body> <div ng-app=""> <p>在输入框中尝试输入:& ...