其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。
想要实现的效果为：
未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。
当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。
1、利用行内元素：
我首先想到了这个思路，思路如下：
让P居中，P中的文字左对齐：(P的父级text-align:center; P自身text-align:left;)
P的宽度根据文字的宽度伸缩，当文字为一行时，则P的宽度小于LI的宽度，居中；则看上去文字是局中的。
当大于一行时，P的宽度和LI的宽度是一致的，文字就居左了。
文字测试
*{margin: ;padding: ;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:16px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1.5;}
ul {width: 500px; margin: 100px auto; overflow: hidden;}
/*代码开始*/
li {
/* 这些都不重要 */
float: left;width: 150px;background: #fafafa;height: 50px;margin-right: 10px;
/* 重点 */
text-align: center;
}
/* 重点 */ display: inline-block使P的宽度根据文字的宽度伸缩
p {
display: inline-block;
text-align: left;
}
一行文字
这里是比较长的两行文字
效果：
2、利用万能的表格
HTML代码和解决方法一是一致的。主要是利用了table的牛逼特性：未知宽度的table 也是可以左右对齐的！
文字测试
*{margin: ;padding: ;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:16px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1.5;}
ul {width: 500px; margin: 100px auto; overflow: hidden;}
/*代码开始*/
li {
/* 这些都不重要 */
float: left;width: 150px;background: #fafafa;height: 50px;margin-right: 10px;
}
/* 重点 */
p {
display: table;
margin: 0 auto;
}
一行文字
这里是比较长的两行文字
css 多出一行或多行后显示...的方法
一行超出显示... .mui-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 两行超出的显示. ...
纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space:nowrap; overflow:hidden; text-o ...
css设置文字上下居中，一行文字居中，两行或多行文字同样居中。
转:/handsomeBoys/p/6599062.html HTML:
文字滚动的内容文字滚动的内容文 ...
CSS图片文字同行居中
img{ display:inline-block; vertical-align:middle; }
纯css用图片代替checkbox和radio,无js实现方法
html
随机推荐
第三十九章 微服务CICD(1)- gitlab搭建与使用(docker版)
一.下载docker镜像 前提:docker引擎已经安装好. docker pull gitlab/gitlab-ce gitlab是8.13.1版本. 二.启动应用 docker run -d -h ...
Nginx出现413 Request Entity Too Large错误解决方法
Nginx出现的413 Request Entity Too Large错误,这个错误一般在上传文件的时候出现,打开nginx主配置文件nginx.conf,找到http{}段,添加 解决方法就是 打 ...
GC roots 总结
previouscontentnext GC roots The so-called GC (Garbage Collector) roots are objects ...
骑士飞行棋 C#代码详解
最近看见一个骑士飞行棋的小游戏代码,感觉这个代码中将大多数C#的基础知识都运用到了,是一个新手检验学习成果的有效方法,特此将这个代码整理一遍.这是一个控制台程序.这是代码下载地址,代码中的注释非常详细 ...
Extjs4.2 Desktop 拖动黑色和白色的桌面图标的解决方案
最近做了一个extjs4.2的desktop桌面demo,该desktop从原来的包中剥离出来,并实现了桌面图标休息,拖动桌面图标,但是,用户抱怨拖动桌面图标会出现黑色和白色,测试,在 extjs4. ...
log设置
1.log的设置方式 .在 runtime setting中可以设置log的生成方式:默认的log方式:Enable logging选中,log option是Send messages only w ...
芝麻HTTP：分析Robots协议
利用urllib的robotparser模块,我们可以实现网站Robots协议的分析.本节中,我们来简单了解一下该模块的用法. 1. Robots协议 Robots协议也称作爬虫协议.机器人协议,它的 ...
MySQL命令行导入sql文件时出现乱码解决方案
Note: sql> source F:weibo.sql(执行相关sql文件) sql> select * from sina into outfile "/weibo.txt ...
一：SpringCloud
一:前提知识+相关说明 前提知识:springmvc+spring/springboot+mybatis+maven+git...... cloud技术的五大神兽: 面试题: 什么是微服务? 微服务之 ...
