尽管这些要求很常见。 主要用在商品列表页，商品图片下方，显示商品名称。 而它的纯CSS实现确实很烧脑，一般都会放弃这个需求，或者用JS来实现。
然而，我坚信这必须用纯 CSS 来解决！ ！ 为什么我这么有信心？ 因为我很多年前在白理想峰会上就看到大神解决了！ ！ ！
好的。 我实在找不到这个帖子，万能的百度也没能给我解决办法。 我只能自己想办法。
问题描述
如何利用css实现一行文本居中、多行左对齐？
预期疗效为：
当文本的宽度小于包的长度时，会手动换行成为多行文本，并且文本会左对齐。
好吧！ 如何实现？ 经过我自己的研究，我找到了两个解决方案！ ！
解决方案1：使用内联元素
我首先想到了这个想法css文字左对齐，想法如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字测试</title>
</head>
<body>
<ul>
<li><p>一行文字</p></li>
<li><p>这里是比较长的两行文字</p></li>
</ul>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
这应该是 HTML 结构
令P居中，P中的文本左对齐
P的长度根据文本的长度进行扩展和收缩
当文本为一行时，P的长度大于LI的长度，且居中
然后看起来文字就在游戏里了
当少于一行时，P的长度与LI的长度相同
文字在左边
所以，CSS 是：
/* 傻大本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"5FAE8F6F96C59ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
/* 开始了！！！！ */
li {
/* 这些都不重要 */
float: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;
/* 重点 */
text-align: center;
}
/* 重点 */
p {display: inline-block;text-align: left;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
嗯，我是这么想的，忘了给P加上text-align: left； 这让我错误地认为这条路行不通。 于是，我想到了另一个解决方案。
之后组里的同学按照我的思路写下了完整的代码。 因此，该解决方案的原始权利已从我身上消失！ ！
解决方案 2：使用通用形式
HTML代码与方案1一致。
CSS如下：
/* 傻大本粗RESET*/
*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}
body {font-size:13px;font-family:tahoma,Helvetica, Arial,"5FAE8F6F96C59ED1";line-height: 1;}
/* 代码开始 */
ul {width: 500px;margin: 100px auto;overflow: hidden;}
li {loat: left;width: 100px;background: #fafafa;height: 50px;margin-right: 10px;}
/* 重点 */
p {display: table;margin: 0 auto}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
当我由于马达哈的粗心而不得不放弃第一个解决方案时，找到了这个解决方案。 主要借助桌子的强大功能。 未知长度的表格也可以左右对齐！ ！
你暴露年龄了吗？の~~餐桌布置的年龄-_-|||
疗效预览地址：
借助视口遮罩解决该问题的方法
这是组里另一位同学给出的解决方案，出乎我的意料。 由于我们没有沟通css文字左对齐，他一听到我的问题就直接去做，并且给出了和我想法完全不同的解决方案。 从结果来看，代码是多余的，其思想却很新颖！
html代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<div class="holder">
<div class="center">
<p class="title">
短标题
</p>
<p class="shadow">
短标题
</p>
</div>
<div class="center">
<p class="title">
长标题就是长标题很长的长标题
</p>
<p class="shadow">
长标题就是长标题很长的长标题
</p>
</div>
<div class="center">
<p class="title">
长标题就是长标题很长的长标题想短也短不了的长标题
</p>
<p class="shadow">
长标题就是长标题很长的长标题想短也短不了的长标题
</p>
</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
CSS代码如下
body{background:#fff;}
div, p{margin:0; padding:0;}
.holder .center{
float: left;
margin: 10px;
}
.center{
width:140px;
height:60px;
position: relative;
font:normal 14px/20px "Microsoft Yahei";
}
.center .title{
}
.center .shadow{
position: absolute;
text-align: center;
background: #fff;
overflow: hidden;
height: 20px;
top: 0;
left: 0;
width: 100%;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
疗效预览地址：
总结
当我把这个话题发到群里时，大家的第一反应都是——这绝对不可能！ ！
然而，有人自己想出了办法解决了这个难题。 而且我还找到了两个解决方案（其中一个自己PASS了，另外一个同学写下来，后来看到了，の~~~~）
其实我可以解决，主要是我在白理想里看到过这个解决方案，但是我真的忘记了。 通过硬记忆，找到想法，然后实现它们。 虽然占据了上风。
最后这位同学能够通过自己的思考这么快就解决了，真是太神奇了！ ！
发表评论