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

　　想要实现的效果为：

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

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. hive学习(二) hive操作

    hive   ddl 操作官方手册https://cwiki.apache.org/confluence/display/Hive/LanguageManual+DDL hive  dml 操作官方手 ...

  2. Subsets I&&II——经典题

    Subsets I Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a s ...

  3. Python与SQLite日期时间函数的使法

    SQLite的时间函数跟Python的时间函数有些许差别,所以稍做记录,供自己以后查询. 网上有将SQLite官方WIKI内容翻译成中文的文章,大家有兴趣可以搜索一下,我这里单纯记录一下个人比较常用的 ...

  4. Sqli-labs less 14

    Less-14 本关我们直接进行测试,输入username:admin" Pasword:(随意) 可以看到报错了,那么我们知道了id进行了 " 的操作. 这里和less13一样, ...

  5. 发现一个FreeSWITCH bug

    在研究FreeSWITCH视频会议的混屏问题时候发现一个bug. 已提交jira. 附上代码,问题很明显,不解释 =========================================== ...

  6. 计蒜客NOIP2018模拟1

    https://www.jisuanke.com/contest/1152 T1:最失败的一道题,其实就是道水题,好几种写法,一种都没想出来. 题意转化后就是:每个数可以选a[i]和a[i]-k,最后 ...

  7. BZOJ 1433 [ZJOI2009]假期的宿舍（网络流）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1433 [题目大意] 在校学生有自己的床,外校的则没有,如果两个同学相互认识,则可以借用 ...

  8. 【循环节】【矩阵乘法】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem F. Fibonacci of Fibonacci

    题意:F(n)为斐波那契数列的第n项,问你F(F(n)) mod 20160519的值. 发现有循环节,F(26880696)=0,F(26880697)=1,.... 于是两次矩乘快速幂即可. #i ...

  9. 20162321 实验一 Java开发环境的熟悉(Linux + Eclipse)

    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 王彪 学号:20162321 指导教师:娄嘉鹏 王志强 实验日期:3月25日 实验密级: 非密级 预 ...

  10. [HDU3756]Dome of Circus

    题目大意: 在一个立体的空间内有n个点(x,y,z),满足z>=0. 现在要你放一个体积尽量小的圆锥,把这些点都包住. 求圆锥的高和底面半径. 思路: 因为圆锥里面是对称的,因此问题很容易可以转 ...