如何在多行文本中实现距离可调的下划线？-css教程-PHP中文网

如何在多行文本中实现距离可调的下划线？

霞舞

发布： 2024-10-22 08:54:02

转载

782人浏览过

如何在多行文本中实现距离可调的下划线？

实现多行文本中距离可调的下划线

对于多行文本段落，仅使用 text-decoration: underline; 无法实现距离可调的下划线效果，需要借助额外的 css 属性。

解决方案：

使用 text-decoration 和 text-underline-offset 属性结合实现。

text-decoration: underline;
text-underline-offset: 5px; /* 调整下划线距离文字的距离，单位为像素 */

登录后复制

以下代码展示了如何使用该解决方案：

<p>多行文本</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9331">
                            <img src="https://img.php.cn/upload/webcode/000/000/014/175868640629271.png" alt="情感家园企业站5.0 多语言多风格版">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9331">情感家园企业站5.0 多语言多风格版</a>
                            <p>一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="情感家园企业站5.0 多语言多风格版">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9331" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="情感家园企业站5.0 多语言多风格版">
                        </a>
                    </div>
                
<p>下方黑色是默认的 <code>text-decoration: underline;</code> 效果</p>

登录后复制

p {
  text-decoration: underline;
  text-underline-offset: 5px;
  color: blue; /* 调整下划线的颜色 */
}

登录后复制

最终效果如下所示：

[图片展示多行文本中距离可调的下划线效果]

更多控制：

text-underline-style 属性允许设置下划线的样式，例如点状、破折号或波浪线。
text-decoration-color 属性设置下划线的颜色，而 color 属性设置文本的颜色。

通过结合使用这些属性，可以实现高度可定制的多行文本下划线。

以上就是如何在多行文本中实现距离可调的下划线？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css清除浮动的原因 css中flex是什么 css Flex容器如何理解 css设置文字居中的两种方法 css中grid布局的使用