问题及场景：

当内容能一行显示在盒子内时，文字居中对齐。

当内容过多换行后显示在盒子内时，文字左对齐。

其实这种视觉上的需求还是蛮常见的。比如用于弹出提示框，当提示内容比较少时，内容居中显示在弹出框，提示内容比较多时，内容居左对齐。但是其纯CSS实现有点麻烦，一般就放掉这个需求，或者，使用JS实现。

解决方案：

CSS实现代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    /*当文字为一行是，则P的宽度小于div的宽度，p标签居中显示在盒子内，文字也就居中了 ;当大于一行时，P的宽度和div的宽度是一致的 ,文字就居左对齐了*/

    .content {  width: 200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}

    /*display: inline-block使P的宽度根据文字的宽度伸缩 */

    .content p {  text-align: left;  display: inline-block  }

</style>

<body>

<div class="content">

    <p>内容只有一行居中</p>

</div>

<br>

<div class="content">

    <p>内容多行左对齐，内容多行左对齐</p>

</div>

</body>

</html>

效果如下

css实现一行文字居中，多行文字左对齐的更多相关文章

  1. Python3 tkinter基础 Label justify 多行字符串左对齐

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)

    在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...

  4. 如何使Label显示时，一行顶部居中，两行靠左显示－－－－董鑫

    有时我们会碰到这种情况,一个要根据内容显示一行还是两行,一行时还要靠着顶部再居中,比如下面 最左边的名称,要求是靠上的,如果按照正常的方式写的话,可能一行的话就会出现居中显示了,不会顶着头部显示. 我 ...

  5. CSS布局，div居中，文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  6. css实现一行居中显示，两行靠左显示，超过两行以引号省略

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android ToolBar标题文字居中的方法

    在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件 ...

  8. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. 谈谈一些有趣的CSS题目-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

随机推荐

  1. [高性能MYSQL 读后随笔] 关于事务的隔离级别（一）

    一.锁的种类 MySQL中锁的种类很多,有常见的表锁和行锁,也有新加入的Metadata Lock等等,表锁是对一整张表加锁,虽然可分为读锁和写锁,但毕竟是锁住整张表,会导致并发能力下降,一般是做dd ...

  2. 数据库备份并分离日志表（按月）sh 脚本

    #!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...

  3. 三大框架SSH整合

    三大框架SSH整合 -------------------------------Spring整合Hibernate------------------------------- 一.为什么要整合Hi ...

  4. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. innodb 自增列重复值问题

    1 innodb 自增列出现重复值的问题 先从问题入手,重现下这个bug use test; drop table t1; create table t1(id int auto_increment, ...

  6. 猫哥网络编程系列：详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  7. webpack搭建前端一条龙服务

    作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...

  8. 解析大型.NET ERP系统 电子邮件系统帐户集成

    为保证ERP系统的信息流准确快速的传递,需要给系统设计一个消息盒子机制.当系统中发生业务操作后,需要提醒下一个环节的操作人员,以保证ERP信息流快速准确传递.比如生产任务单(工作单,加工单,制单)过帐 ...

  9. webpack入门之简单例子跑起来

    webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时 ...

  10. 【Win 10 应用开发】分析 URI 中的查询字符串

    分析URI中的字符有K种方法(K >= 2),如果查询字符串中的参数比较简单,可以通过子字符串查找的方式来处理:如果查询字符串相对复杂,你可以使用正则表达式来匹配 key1=value1 ,  ...