CSS 文字两端对齐

左手的ㄟ右手 2023-06-07 10:41 109阅读 0赞

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。

预览效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 两端对齐</title>
    <style type="text/css">
        div.justify {
            text-align: justify;
            text-align-last: justify;
            width: 200px;
            font-size: 16px;
            color: red;
            border: 1px solid blue;
            line-height: 32px;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div class="justify">hello, text justify.</div>
    <br />
    <div class="justify">中文两端对齐</div>
</body>
</html>

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要加text-align-last: justify样式。

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文由黄河爱浪整理转载，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关文字两端对齐

1. 文字两端对齐 text-align-last:justify; text-align:justify;

我不是女神ヾ/ 2023年07月23日 03:31/ 0 赞/ 133 阅读

相关 css两行文字两端对齐

效果如下： ![20200325091008688.png][] <!DOCTYPE html> <html> <head> <me

ゞ浴缸里的玫瑰/ 2023年07月18日 06:53/ 0 赞/ 296 阅读

相关 CSS 文字两端对齐

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。预览效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

左手的ㄟ右手/ 2023年06月07日 10:41/ 0 赞/ 110 阅读

相关文字两端对齐

文字两端对齐 text-align-last:justify 属性规定如何对齐文本的最后一行。适用于文本只有一行的时候 [见参考][Link 1] ![在这里

爱被打了一巴掌/ 2023年03月04日 11:22/ 0 赞/ 106 阅读

相关 css实现内容两端对齐

问题描述：因行边缘出现符号或其它情况导致行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？ ![在这里插入图片描述][20201224102447758.p

快来打我*/ 2022年12月30日 05:00/ 0 赞/ 342 阅读

相关 CSS——解决文本溢出／自动换行／文字两端对齐

1 单行文本溢出 .text{ width: 100px;//宽度要定义好 overflow: hidden;//溢出隐藏

青旅半醒/ 2022年05月23日 02:45/ 0 赞/ 531 阅读

相关 CSS小技巧之两行文字两端对齐

假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的： ![在这里插入图片描述][20

约定不等于承诺〃/ 2022年04月24日 05:30/ 0 赞/ 767 阅读

相关 CSS :after伪类元素实现文字两端对齐

以前很多人都这么干过：两个字中间使用来隔开达到四个字的宽度，三个字也可以，但是，如果文字中包含有数字、大小写英文字母时，比如 “122账号”“abc密码” 这样的，就不好计算

た入场券/ 2022年03月18日 10:08/ 0 赞/ 844 阅读

相关 CSS 文字两端对齐

<!DOCTYPE HTML> <html> <head> <title></title> <meta http-equ

电玩女神/ 2021年10月23日 16:22/ 0 赞/ 537 阅读

相关 css 文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

你的名字/ 2021年05月12日 11:51/ 0 赞/ 761 阅读