CSS实现文字少居中换行居左

最新推荐文章于 2024-01-25 16:17:13 发布

一晌贪欢i

最新推荐文章于 2024-01-25 16:17:13 发布

阅读量5.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css html5

本文链接：https://blog.csdn.net/qq_27674439/article/details/120263192

该博客介绍了如何使用CSS实现一行文字在不足一行时居中显示，多余一行时左对齐的布局效果。主要提供了三种实现方法：（1）通过设置行内元素的`display: inline-block`和`text-align: left`属性；（2）利用`display: table`属性；（3）使用图层覆盖，结合绝对定位来达到预期效果。这些方法详细解析了CSS布局的灵活性和实用性。

“用 css 对一行文字进行布局，当文字不够换行的时候，这行文字要居中显示，当文字出现换行的时候，这行文字要靠左显示。”
在这里插入图片描述

在这里插入图片描述
效果如上，如果直接居中的话会出现这种效果：

实现方式如下：

总结
实现方法：
（1）通过行内样式实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .wrap {
            margin-top: 10px;
            width: 200px;
            height: 100px;
            padding: 5px;
            background-color: skyblue;
            text-align: center;
        }
        .content {
            display: inline-block;
            text-align: left;
            word-break: break-all;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <span id="content" class="content">标题</span>
    </div>
    <div class="wrap">
        <span id="content" class="content">一些无关的文字。。。。。。。。。。。</span>
    </div>
    <div class="wrap">
        <span id="content" class="content">还是任意文字</span>
    </div>
</body>
</html>

上面的代码首先在外层包含框wrap中设置 text-algin：center；使得子元素能相对于父元素居中，然后子元素设置 display:inlne-block; 使得行内元素转化为行内块元素，此时可以给行内块设置 text-algin:left；使得文字在容器中放不下的时候出现换行居左。
　（2）通过table表格实现

　<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .wrap {
            margin-top: 10px;
            width: 200px;
            height: 100px;
            padding: 5px;
            background-color: skyblue;
        }
        .content {
            display: table;
            margin: 0 auto;
            word-break: break-all;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <span id="content" class="content">标题</span>
    </div>
    <div class="wrap">
        <span id="content" class="content">一些无关的文字。。。。。。。。。。。</span>
    </div>
    <div class="wrap">
        <span id="content" class="content">还是任意文字</span>
    </div>
</body>
</html>

实现效果如上，这段代码是通过了给子元素设置了display:table;
　（3）利用图层覆盖解决

　<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div,span{
            padding: 0;
        }
        .wrap {
            margin-top: 10px;
            width: 200px;
            height: 100px;
            padding: 0 5px;
            background-color: skyblue;
            position: relative;
        }
        .content {
        }
        .hide{
            position: absolute;
            text-align: center;
            background: skyblue;
            overflow: hidden;
            height: 20px;
            left: 0;
            top: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <span  class="content">标题</span>
        <span  class="hide">标题</span>
    </div>
    <div class="wrap">
        <span  class="content">一些无关的文字。。。。。。。。。。。</span>

        <span  class="hide">一些无关的文字。。。。。。。。。。。</span>
    </div>
    <div class="wrap">
        <span  class="content">还是任意文字</span>

        <span  class="hide">还是任意文字</span>
    </div>
</body>
</html>

上面这段代码应该比较容易理解，但实现起来复杂，主要是重复写两次一样的文字，都属于行内元素，给hide的元素设置高度，当高度不够的时候设置隐藏溢出部分，并设置绝对定位，用于显示第一行数据，实现第一行居中效果，然后剩下行的显示content的中的效果，最终合成想要的效果图。这样实现起来复杂但是思路最清晰