解决Grid布局下，子元素a标签中的文本不自动换行问题

最新推荐文章于 2024-03-20 17:38:36 发布

weixin_45545395

最新推荐文章于 2024-03-20 17:38:36 发布

阅读量1.5k

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/weixin_45545395/article/details/120319197

版权

当父元素为“块级”元素时，子元素<a>标签中的文本会溢出父元素之外，但不会造成后面的布局内容溢出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .box{
        	/*display:grid;*/
            display: block;
            box-sizing: border-box;
            border:2px solid red;
        }
        
        .box a{
            display: block;
            /* overflow-x: hidden; */
            /* word-wrap: break-word; */
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">https://test&&Wouldyousaythesamewearefallingfromtheouterspace.com</a>
        <div>文本测试,a标签的溢出会导致后面的布局也一起溢出</div>
    </div>
</body>
</html>

在这里插入图片描述

当父级使用Grid布局时，子元素<a>标签中的文本会溢出父元素之外，会造成后面的布局内容溢出，破坏网页布局，在移动端下尤为明显。
在这里插入图片描述
解决这一问题，需要对<a>标签进行限制

当父元素为“块级”元素时,给 a 标签添加 word-wrap: break-word; 即可

当父级使用Grid布局时,需要同时给 a 标签添加

overflow-x: hidden;

word-wrap: break-word;

这样就可以实现链接换行。

在这里插入图片描述
为了这两行代码，查了两个多小时文档，各种google结果都没用，还是自己摸索出来了。。。。。

weixin_45545395

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
解决Grid布局下，子元素a标签中的文本不自动换行问题

当父元素为“块级”元素时，子元素<a>标签中的文本会溢出父元素之外，但不会造成后面的布局内容溢出。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
复制链接

扫一扫