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

  想要实现的效果为:

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

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. selenium 参数传递(testng.xml 、DataProvider )

    为了方便测试代码的复用性,常常采用参数化.传递参数给测试代码 有一下两种方法:1.通过配置XML文件实现.2.通过DataProvider 传递参数. 注意:DataProvider 传递参数返回的是 ...

  2. 【机器学习】k-近邻算法以及算法实例

    机器学习中常常要用到分类算法,在诸多的分类算法中有一种算法名为k-近邻算法,也称为kNN算法. 一.kNN算法的工作原理 二.适用情况 三.算法实例及讲解 ---1.收集数据 ---2.准备数据 -- ...

  3. AC日记——背单词 洛谷 P2353

    背单词 思路: KMP+统计前缀和优化: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1000005 ], ...

  4. http中使用json封装数据的性能测试

    http中使用json封装数据的性能测试     一个项目使用json封装数据,接口例如:   客户端发送:   POST /list.do HTTP/1.1   Host: zoomi.com.cn ...

  5. react native 增加react-native-storage

    现时需要使用react-native-storage本地存储 第一步:配置storage主文件 mystorage.js import { AsyncStorage } from 'react-nat ...

  6. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  7. Python3 字典及三级菜单练习

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- # Author;Tsukasa list_1 = { '广州':{ '越秀区':{ '五羊石像','镇海 ...

  8. Codeforces 550 D. Regular Bridge

    \(>Codeforces \space 550 D. Regular Bridge<\) 题目大意 :给出 \(k\) ,让你构造出一张点和边都不超过 \(10^6\) 的无向图,使得每 ...

  9. 调用sort段错误问题

    问题:sort的比较函数实现有问题导致进程调用sort时core了. 结论:特别要注意,sort的比较函数必须遵循严格弱排序(strict weak ordering)的规则.   这是最近在工作中遇 ...

  10. 【模拟退火】poj1379 Run Away

    题意:平面上找一个点,使得其到给定的n个点的距离的最小值最大. 模拟退火看这篇:http://www.cnblogs.com/autsky-jadek/p/7524208.html 这题稍有不同之处仅 ...