解决文字溢出盒子问题

2024年2月10日 239次阅读 来源: 司_尘

通常我们实战之中会遇到文字溢出盒子的问题，那么怎样去解决小编这边罗列了几种情况以及解决方法。

1.单行文字溢出

单行文字溢出我们用CSS操作有一个三件套

whitespace:nowrap;  /*这边是阻止文字换行*/

overflow:hidden;    /*隐藏溢出部分*/

test-overflow:ellipsis;  /*用点代替被切断文字*/

2.多行文字溢出解决

pc端前端中没有用技术去解决，而是采取的测距打点（手动敲省略号）。

移动端使用的技术有需求的可以再去查一下，小编这边不做介绍。

3.溢出的一个实用技术

实战中我们碰到的特别是logo一般都是图片代替文字，同样的当CSS端无法被显示时对于这种logo一般的我们还是能看到一个超链接文字，这是一个很不经意的一个点，但同样也是用溢出去实现的。

原理：文字本身肯定是不在盒子之中的，在盒子外被隐藏，两种方法直接撸上代码

1.用text-indent

a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-image:url();
        text-indent:  200px;
        white-space: nowrap;
        overflow: hidden;
    }

用缩进将文字挤出盒子然后将其隐藏，那么当CSS没被加载时我们的a标签任然有文字有链接可以点击

2.设置高度为0

我们将高度设置为0（高度为0文字自然就出盒子了，然后隐藏），然后用padding去显示背景图片。

优点：代码永远是解决各方面需求的而且做出来东西更加完善，以平常我们所使用背景图代替文字，那么当CSS没被加载出来时该部分失去了功能，这也不是我们想要的。

 

 

    原文作者：司_尘
    原文地址: https://blog.csdn.net/qq_40833779/article/details/87924015
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞