CSS常见效果实现

• CSS 行溢出省略号
  • 单行溢出省略号
  • 多行溢出省略号
• 实现矩形对角线
• BMW WARNING

CSS 行溢出省略号

单行溢出省略号

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

需要设置定长以及超出隐藏。
如果要设置隐藏后鼠标悬浮显示的效果，可以为 div 设定 title 属性，也可以用 hover 来达到效果

多行溢出省略号

div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // (两行文字)
  -webkit-box-orient: vertical;
}

实现矩形对角线

div {
  background: linear-gradient(
    to top right,
    transparent 49.5%,
    rgb(235, 238, 245) 49.5%,
    rgb(235, 238, 245) 50.5%,
    transparent 50.5%
  );
}

BMW WARNING

• Bulletin

本文首发于 skyline.show 欢迎访问，
文章实时更新，如果有什么错误或不严谨之处望请指出，十分感谢。
如果你觉得有用，欢迎到Github仓库点亮⭐️。

I am a bucolic migrant worker but I never walk backwards.

• Material

参考资料如下列出，部分引用可能遗漏或不可考，侵删。

• Warrant

本文作者： Skyline(lty)
授权声明： 本博客所有文章除特别声明外， 均采用 CC BY - NC - SA 3.0 协议。 转载请注明出处！

CC BY - NC - SA 3.0