css固定姓名显示长度,排列更整齐
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固定姓名显示长度,排列更整齐的更多相关文章
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- css控制文字显示长度,超过用省略号替代
.line_text { width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } <span cl ...
- css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- css固定div头部 滚动条滚动内容
页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- CSS Display(显示)和Visibility(可见性)
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...
- CSS元素的显示与隐藏
CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
随机推荐
- kd tree学习笔记 (最近邻域查询)
https://zhuanlan.zhihu.com/p/22557068 http://blog.csdn.net/zhjchengfeng5/article/details/7855241 KD树 ...
- java实现httpclient 访问
package com.test; import java.io.File; import java.io.FileInputStream; import java.io.IOException; i ...
- MAC air 安装redis-3.0.6
redis版本: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Menlo; color: #c33720; background-colo ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- js高级程序设计(六)面向对象
ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正 ...
- Ubuntu12.04安装64位系统出现编译错误error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or dir
问题: Ubuntu12.04安装64位系统出现编译错误error while loading shared libraries: libz.so.1: cannot open shared obje ...
- 实体类调用泛型父类中的静态方法中执行CRUD——第二版
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; namespa ...
- juery 实现下拉框多选 jquery-multiselect
效果: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href=" ...
- 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型,以及任意节点更新的策略。
分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...
- iOS开发UI篇—手写控件,frame,center和bounds属性
iOS开发UI基础—手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...