单行超出省略

.ol{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}

2行超出省略

.tl{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

多行超出省略

.ml{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

不换行

.unbr{
	white-space: nowrap;
}

一、操作

　　我们经常在写页面的时候会碰到文字内容太多超过盒子内容对于这种情况我们常常会用overflow：hidden来隐藏，但是今天就要告诉大家一个新的小知识点，我们可以用它将超出部分的文章隐藏，并用省略号来代替，代码如下：

/*单行*/
span {
  overflow: hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
/*多行*/
span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; // 此行用于控制从多少行开始，溢出时用省略号替换
    overflow: hidden;
    word-break:break-all; // 自动换行
}

二、属性介绍 

1. CSS text-overflow 属性

   值	描述
   clip	修剪文本。
   ellipsis	显示省略符号来代表被修剪的文本。
   string	使用给定的字符串来代表被修剪的文本。

2. CSS overflow 属性

   值	描述
   visible	默认值。内容不会被修剪，会呈现在元素框之外。
   hidden	内容会被修剪，并且其余内容是不可见的。
   scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
   auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
   inherit	规定应该从父元素继承 overflow 属性的值。

3. CSS white-space 属性

   值	描述
   normal	默认。空白会被浏览器忽略。
   pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
   nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
   pre-wrap	保留空白符序列，但是正常地进行换行。
   pre-line	合并空白符序列，但是保留换行符。
   inherit	规定应该从父元素继承 white-space 属性的值。

假设滚动的这个东西类名为name

1. name的父元素宽度一定，且小于name的宽度，且父元素overflow: hidden;

2. 下面2.35rem是name的父元素的宽度, 可替换为别的

.name {
    white-space: nowrap;
}
.name.scroll {
    animation: 3s wordsLoop linear infinite;
}
@keyframes wordsLoop {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(calc(-100% + 2.35rem));
    }
    100% {
        transform: translateX(calc(-100% + 2.35rem));
    }
}

3. 当name宽度超过父元素宽度时，为其添加scroll类

以下是在vue中的操作：

1）绑定一个ref和一个scroll类

<div 
    class="name" 
    v-html="currentSong.name" 
    ref="songName1" 
    :class="{ scroll: nameScroll }">
</div>

2）data里加一个nameScroll: false

3) 2.35 * parseInt(document.querySelector('html').style.fontSize) 是我项目里name的父元素宽度，可以替换为别的。这段代码写在哪需要根据自己的项目调整，需要在name渲染之后调用。

if (this.$refs.songName1.clientWidth > 2.35 * parseInt(document.querySelector('html').style.fontSize)) {
    this.nameScroll = true
} else {
    this.nameScroll = false
}