如何使用css实现文字一行居中,多行左对齐?

FungLeo
博客专家认证
2015-11-12 11:07:11
我记得多年前在蓝色理想有位高手解决了这个问题的。但是时隔多年,利用搜索引擎也没搜索出来。因此特此提问。

想要实现的效果为:

未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中。
当文字长度大于盒子的宽度,会自动换行,成为多行文字,此时文字左对齐。

下图为示例:



希望能有纯css的解决方案,为了这个写一段js很不划算。虽然用js来解决是一件巨简单的事情。
...全文
721 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
dawnsun001 2019-08-02
  • 打赏
  • 举报
回复
给盒子(p元素)的父级设置text-align:center 给这个p元素设置display:inline-block; text-align:left; 完美解决
xiahuaxuanlan1113 2017-11-30
  • 打赏
  • 举报
回复
使用弹性盒,可以实现单行文本水平居中,多行文本左居中。具体如下 .word { width: 500px; margin: 20px auto 0; border: 1px solid #ccc; display: flex; justify-content: center; } <div class="word"> 我们都是好孩子 </div>
FungLeo 2015-11-12
  • 打赏
  • 举报
回复
解决方法:http://blog.csdn.net/FungLeo/article/details/49797311 (2015年11月12日 13:03:39 此时还在审核)
FungLeo 2015-11-12
  • 打赏
  • 举报
回复
引用 1 楼 kongwei521 的回复:
<p style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis; width: 200px;max-width:200px;*width:expression(this.scrollWidth > 200 ? '200px' : 'auto')</p> 超过自动换行。
没有理解问题。但是谢谢你的答案。
蝶恋花雨 2015-11-12
  • 打赏
  • 举报
回复
<p style='overflow: hidden;white-space: nowrap;text-overflow: ellipsis; width: 200px;max-width:200px;*width:expression(this.scrollWidth > 200 ? '200px' : 'auto')</p> 超过自动换行。

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧