美文网首页
element-ui的走马灯实现竖向文字轮播

element-ui的走马灯实现竖向文字轮播

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-08-25 16:24 被阅读0次

    html

    <el-carousel

          :interval="30000"

          class="lunbo"

          height="64"

          direction="vertical"

        >

          <el-carousel-item v-for="item in currentTabList" :key="item.id">

            <span @click="noticeClick(item.id)">{{ item.contents }}</span>

          </el-carousel-item>

        </el-carousel>

    scss

    .lunbo {

      width: 550px;

      padding: 0 8px 0 0;

      box-sizing: border-box;

      height: 64px; //文本区域的高度

      line-height: 64px; //文本的行间距,与高度相同,则表示一行展示

      text-overflow: ellipsis; //超出内容...展示

      word-break: keep-all; //是否折断文本,keep-all表示不折断

      white-space: nowrap; //不换行展示文本

      overflow: hidden; //超出部分隐藏,与text-overflow配合使用

      flex: 1; //这个是跟左侧的图片组成的一个flex布局

      // 隐藏纵向滚动条

    }

    相关文章

      网友评论

          本文标题:element-ui的走马灯实现竖向文字轮播

          本文链接:https://www.haomeiwen.com/subject/uoqzgrtx.html