CSS中的一些细节

2021-08-07 01:34:31

1.单行和多行文字隐藏

　　　　/* 多行省略 */
      .multiple {
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis; /* 当内联内容溢出块容器时，将溢出部分替换为（...）。*/
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all; /* 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行 */
      }
      /* 单行省略 */
      .single {
        width: 400px;
        white-space: nowrap; /* 会强制所有文本在同一行内显示 */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }

2.同时给图片设置高度和宽度，会引起图片内容压缩，不美观，可设置：

img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}
/*
object-fit 还有一个配套属性 object-position，它可以控制图片在其内容框中的位置。（类似于 background-position），m默认是 object-position: 50% 50%，如果你不希望图片居中展示，可以使用它去改变图片实际展示的 position 。
像是这样，object-position: 100% 50% 指明从底部开始展示图片。这里有一个很好的 Demo 可以帮助你理解 object-position。
*/

3.图片加载失败/丢失：

利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个样式类
利用新增的样式类，配合 <img> 元素的伪元素，展示默认兜底图的同时，还能一起展示 <img> 元素的 alt 信息

 <img src="test.png" alt="图片描述" onerror="this.classList.add(‘error‘);" />

　　　　img.error {
        position: relative;
        display: inline-block;
      }

      img.error::before {
        content: "";
        /** 定位代码 **/
        position: absolute;
        width: 220px;
        height: 200px;
        background: url(./error.jfif) no-repeat;
        background-size: contain;
      }

      img.error::after {
        content: attr(alt);
        /** 定位代码 **/
        position: absolute;
        width: 100%;
        color: red;
        top: 75px;
        left: 90px;
      }

CSS中的一些细节

码农公寓

相关文章