解决文字溢出盒子问题

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

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞