前端开发常见问题总结---1

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

文本长度的动态处理

前端开发中总会遇到文本的展示问题，如果拿到后端给的数据就直接放上去可能会出现问题超出盒子的情况，这时候我们要对文本进行溢出就隐藏，并展示省略号，如下图

上图中矩形框中就是上面提到的文本溢出的情况和响应的处理

• 第一个是单行文本，不允许换行的情况下回溢出
• 第二个是单行文本溢出隐藏，并用省略号代替，主要代码如下

    { 
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

• 第三个是多行文本，会换行的时候的展示效果
• 第四个是多行文本省略，这里的代码是只展示两行，多余的省略，用省略号代替，代码如下

    {
        width: 200px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

图片

在项目中，当我们使用图片，也就是img标签的时候，要记得给img设置上宽高，这样做的好处有以下几点

• 防止后端传来的图片尺寸过大造成显示不正常
• 在图片没加载出来之前提前占位，避免图片从无到有引起页面的重排 设置宽高有时候也会出现问题，可能会把图片拉伸，这时候我们可以通过设置object-fit：cover属性来让图片保持宽高比填充到img中，同时也可以设置object-position:50% 50%;这个属性和background-position类似

    img{
        width:100px;
        height:100px;
        object-fit:cover;
        object-position:50% 50%;
    }

单击选择文本

在一般情况下我们单击两次是选中一部分内容，单击三次是选中一行内容，但有些场景需要快速复制到内容，那么就可以使用到下面这个属性

    user-select:all; //单击选中内容
    
    //::selection，可控制选中内容的背景色，字体颜色，字体阴影
    .text-section::selection{
        background: #f7ec91;
        color: #333;
        text-shadow: 0 0 .5px #aaa, 1px 1px .5px #aaa, 2px 2px .5px #aaa, 3px 3px .5px #aaa, 4px 4px .5px #aaa;
    }
    
    //在某些场景我们可能需要某些内容不能被选中，比如按钮中的文字等，我们就可以使用user-select:none来实现
    { 
        -webkit-user-select: none; /* Safari */ 
        -ms-user-select: none; /* IE 10 and IE 11 */ 
        user-select: none; /* Standard syntax */ 
    }