其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。

　　想要实现的效果为：

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

1、利用行内元素：

　　我首先想到了这个思路，思路如下：

　　　　让P居中，P中的文字左对齐：（P的父级text-align:center;  P自身text-align:left;）

　　　　P的宽度根据文字的宽度伸缩，当文字为一行时，则P的宽度小于LI的宽度，居中；则看上去文字是局中的。

　　　　当大于一行时，P的宽度和LI的宽度是一致的，文字就居左了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字测试</title>

    <style type="text/css">

    *{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;

    }

    </style>

</head>

<body>

<ul>

    <li><p>一行文字</p></li>

    <li><p>这里是比较长的两行文字</p></li>

</ul>

</body>

</html>

　　效果：

2、利用万能的表格

　　HTML代码和解决方法一是一致的。主要是利用了table的牛逼特性：未知宽度的table 也是可以左右对齐的！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文字测试</title>

    <style type="text/css">

    *{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;

    }

    </style>

</head>

<body>

<ul>

    <li><p>一行文字</p></li>

    <li><p>这里是比较长的两行文字</p></li>

</ul>

</body>

</html>

纯CSS实现文字一行居中，多行左对齐的方法的更多相关文章

  1. css 多出一行或多行后显示...的方法

    一行超出显示... .mui-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 两行超出的显示. ...

  2. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

  3. css设置文字上下居中，一行文字居中，两行或多行文字同样居中。

    转:https://www.cnblogs.com/handsomeBoys/p/6599062.html HTML: <div class="book-detail-store-it ...

  4. css让文字，字母折行

    加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrap和word-break属性: ul li{ width: 100px; word-wrap: break-word; w ...

  5. 【css】纯css实现文字循环滚动效果

    不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...

  6. CSS图片文字同行居中

    img{ display:inline-block; vertical-align:middle; }

  7. 纯css用图片代替checkbox和radio,无js实现方法

    html <ul id="is_offical_post_links"> <li> <label> <input type="c ...

  8. CSS设置table下tbody滚动条与thead对齐的方法

    <style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...

  9. 多textView设置布局居中显示文本左对齐或右对齐

    在textView上层套一个ViewGroup即可,如 <?xml version="1.0" encoding="utf-8"?> <Rel ...

随机推荐

  1. python之路——面向对象进阶

    阅读目录 isinstance和issubclass 反射 setattr delattr getattr hasattr __str__和__repr__ __del__ item系列 __geti ...

  2. jQuery源码浅析

    这几天看了下jQuery源码,有些收获,解答了我以前对jQuery的疑问,现在我把收获分享给大家. 一.jQuery为何弄成自执行函数,以及为何在引用了jquery文件之后,可以通过$或jQuery来 ...

  3. C#获取网页信息核心方法（入门一）

    目录:信息采集入门系列目录 下面记录的是我自己整理的C#请求页面核心类,主要有如下几个方法 1.HttpWebRequest Get请求获得页面html 2.HttpWebRequest Post请求 ...

  4. nodejs调试基础【转载】

    nodejs调试基础[转载] 看到了一片不错的文章: 作者:前端求生之路 链接:nodejs调试基础[转载]

  5. CentOS7配置sentinel高可用redis

    redis哨兵:用于管理和实现多个redis组实现高可用,sentinel哨兵只监控主节点,因为主节点上有所有的从节点信息,当master节点发生故障,sentinel之间会进行投票选举一个slave ...

  6. thinkjphp 模板中获取url中的action

    <if condition="ACTION_NAME eq 'add'">新增<else/>编辑</if>

  7. B/S、C/S模式介绍

    1.B/S模式 B/S(Browser/Server,浏览器/服务器)方式的网络结构. ①.客户端统一采用浏览器如:Netscape和IE,通过Web浏览器向Web服务器提出请求,由Web服务器对数据 ...

  8. 牛刀小试之Django二

    model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  9. C＋＋－ＳＴＬ－（ｍａｐ用法）

    http://blog.csdn.net/sunshinewave/article/details/8067862

  10. 【计算几何】【极角排序】【二分】Petrozavodsk Summer Training Camp 2016 Day 6: Warsaw U Contest, XVI Open Cup Onsite, Sunday, August 28, 2016 Problem J. Triangles

    平面上给你n(不超过2000)个点,问你能构成多少个面积在[A,B]之间的Rt三角形. 枚举每个点作为直角顶点,对其他点极角排序,同方向的按长度排序,然后依次枚举每个向量,与其对应的另一条直角边是单调 ...