CSS 文字超出隐藏，显示省略号，文字垂直显示 内容超出容器时显示滚动条

CSS 文字超出隐藏，显示省略号

效果图：

单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical;

内容超出容器时显示滚动条

1.overflow:auto;内容会被修剪,超出设置的宽高后会出现滚动条
2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置
3.overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。
4.overflow:hidden;内容被修剪,多余的内容被隐藏

文字垂直显示

//垂直从左到右 
writing-mode: vertical-lr;

//垂直从右到左 
writing-mode: vertical-rl;


width: 0.3rem;
height: 1.1rem;
line-height: 0.3rem;
text-align: center;
letter-spacing: 3px;

视频充满容器

width: 100%;
height: 100%;
object-fit: cover;

回车搜索

@keydown.enter.prevent=“getFirstPage”

文字描边效果

-webkit-text-stroke: 1.5px #017c7b

文字渐变色

background: linear-gradient(
  0deg,
  #a7dfdf 20.947265625%,
  #ffffff 67.431640625%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

动画效果