精华内容
下载资源
问答
  • vue中实现文字超出横向滚动 marquee组件 <template> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <p class="marquee">{{text}}</p> <p...

    vue中实现文字超出横向滚动

    marquee组件
    <template>
      <div class="marquee-wrap" ref="marquee-wrap">
        <div class="scroll" ref="scroll">
          <p class="marquee">{{text}}</p>
          <p class="copy" ref="copy"></p>
        </div>
        <p class="getWidth" ref="getWidth">{{text}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'marquee',
      props: ['val'],
      data () {
        return {
          timer: null,
          text: ''
        }
      },
      created () {
        let timer = setTimeout(() => {
          this.move()
          clearTimeout(timer)
        }, 1000)
      },
      mounted () {
        for (let item of this.val) {
        this.text += item
        }
      },
      methods: {
        move () {
        let maxWidth = this.$refs['marquee-wrap'].clientWidth
        let width = this.$refs['getWidth'].scrollWidth
          if (width <= maxWidth) return
        let scroll = this.$refs['scroll']
        let copy = this.$refs['copy']
          copy.innerText = this.text
          let distance = 0 
          this.timer = setInterval(() => {
            distance -= 1
            if (-distance >= width) {
              distance = 16
            }
            scroll.style.transform = 'translateX(' + distance + 'px)'
          }, 20)
        }
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }
    </script>
    
    <style scoped>
      .marquee-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      .marquee{
        margin-right: 0.16rem;
      }
      p {
        word-break:keep-all;
        white-space: nowrap;
        font-size: 0.28rem;
      }
      .scroll {
        display: flex;
      }
      .getWidth {
        word-break:keep-all;
        white-space:nowrap;
        position: absolute;
        opacity: 0;
        top: 0;
      }
    </style>
    
    使用marquee组件
    //引入组件
    import Marquee from './marquee'
    //注册并使用
    <Marquee :val=""></Marquee>
    
    展开全文
  • 主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 不使用任何js代码如何实现一段很长的文字横向滚动?纯css实现文字循环滚动效果* {margin: 0;padding: 0;}.box {width: 300px;margin: 0 auto;position: relative;border: 1px solid #ff6700;}.animate {padding-left...

    不使用任何js代码如何实现一段很长的文字横向滚动?

    纯css实现文字循环滚动效果

    * {

    margin: 0;

    padding: 0;

    }

    .box {

    width: 300px;

    margin: 0 auto;

    position: relative;

    border: 1px solid #ff6700;

    }

    .animate {

    padding-left: 20px;

    font-size: 12px;

    color: #000;

    white-space: nowrap;

    animation: 15s wordsLoop linear infinite normal;

    }

    @keyframes wordsLoop {

    0% {

    transform: translateX(0px);

    -webkit-transform: translateX(0px);

    }

    100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    }

    }

    @-webkit-keyframes wordsLoop {

    0% {

    transform: translateX(0px);

    -webkit-transform: translateX(0px);

    }

    100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    }

    }

    君不见黄河之水天上来,奔流到海不复回,君不见高堂明镜悲白发,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月

    上面是我自己的实现,但总是到“金”这里横向滚动就结束了,要怎么解决一下?

    展开全文
  • 后加文字即可,当超过文本容器长度时,触动横向滚动效果。 二、直接引入组件 marquee组件 < template > < div class = " marquee-wrap " > < div class = " scroll " > < p class = " marquee ...

    一、npm 安装

    如果你想安装插件(自己写的)

    安装

    # install dependencies
    npm i marquee-components
    
    

    使用

    在main.js引入

    import marquee from 'marquee-components'
    Vue.use(marquee );
    

    在页面使用

    <template>
      <div id="app">
           <marquee :val="msg"></marquee>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
        }
      }
    }
    </script>
    

    val后加文字即可,当超过文本容器长度时,触动横向滚动效果。

    二、直接引入组件

    marquee组件

    <template>
      <div class="marquee-wrap">
        <div class="scroll">
          <p class="marquee">{{text}}</p>
          <p class="copy"></p>
        </div>
        <p class="getWidth">{{text}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'marquee',
      props: ['val'],
      data () {
        return {
          timer: null,
          text: ''
        }
      },
      created () {
        let timer = setTimeout(() => {
          this.move()
          clearTimeout(timer)
        }, 1000)
      },
      mounted () {
        for (let item of this.val) {
          this.text += ' ' + item
        }
      },
      methods: {
        move () {
          let maxWidth = document.querySelector('.marquee-wrap').clientWidth
          let width = document.querySelector('.getWidth').scrollWidth
          if (width <= maxWidth) return
          let scroll = document.querySelector('.scroll')
          let copy = document.querySelector('.copy')
          copy.innerText = this.text
          let distance = 0 
          this.timer = setInterval(() => {
            distance -= 1
            if (-distance >= width) {
              distance = 16
            }
            scroll.style.transform = 'translateX(' + distance + 'px)'
          }, 20)
        }
      },
      beforeDestroy () {
        clearInterval(this.timer)
      }
    }
    </script>
    
    <style scoped>
      .marquee-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      .marquee{
        margin-right: 16px;
      }
      p {
        word-break:keep-all;
        white-space: nowrap;
        font-size: 16px;
        font-family: "微软雅黑 Light";
      }
      .scroll {
        display: flex;
      }
      .getWidth {
        word-break:keep-all;
        white-space:nowrap;
        position: absolute;
        opacity: 0;
        top: 0;
      }
    </style>
    
    

    其他页面引入marquee组件

    <template>
      <div class="container">
            <marquee :val="title"></marquee>
      </div>
    </template>
    <script>
    import marquee from './marquee'
     name: 'index',
     components: {
        marquee
     },
      data () {
        return {
    		title: ''
        }
      },
    </script>
    
    展开全文
  • import marquee from './marquee' name: 'index', components: { marquee }, data () { return { title: '' } }, 总结 以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助 ...

    一、npm 安装

    如果你想安装插件(自己写的)

    安装

    # install dependencies

    npm i marquee-components

    使用

    在main.js引入

    import marquee from 'marquee-components'

    vue.use(marquee );

    在页面使用

    export default {

    name: 'app',

    data () {

    return {

    msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'

    }

    }

    }

    val后加文字即可,当超过文本容器长度时,触动横向滚动效果。

    二、直接引入组件

    marquee组件

    {{text}}

    {{text}}

    export default {

    name: 'marquee',

    props: ['val'],

    data () {

    return {

    timer: null,

    text: ''

    }

    },

    created () {

    let timer = settimeout(() => {

    this.move()

    cleartimeout(timer)

    }, 1000)

    },

    mounted () {

    for (let item of this.val) {

    this.text += ' ' + item

    }

    },

    methods: {

    move () {

    let maxwidth = document.queryselector('.marquee-wrap').clientwidth

    let width = document.queryselector('.getwidth').scrollwidth

    if (width <= maxwidth) return

    let scroll = document.queryselector('.scroll')

    let copy = document.queryselector('.copy')

    copy.innertext = this.text

    let distance = 0

    this.timer = setinterval(() => {

    distance -= 1

    if (-distance >= width) {

    distance = 16

    }

    scroll.style.transform = 'translatex(' + distance + 'px)'

    }, 20)

    }

    },

    beforedestroy () {

    clearinterval(this.timer)

    }

    }

    .marquee-wrap {

    width: 100%;

    overflow: hidden;

    position: relative;

    }

    .marquee{

    margin-right: 16px;

    }

    p {

    word-break:keep-all;

    white-space: nowrap;

    font-size: 16px;

    font-family: "微软雅黑 light";

    }

    .scroll {

    display: flex;

    }

    .getwidth {

    word-break:keep-all;

    white-space:nowrap;

    position: absolute;

    opacity: 0;

    top: 0;

    }

    其他页面引入marquee组件

    import marquee from './marquee'

    name: 'index',

    components: {

    marquee

    },

    data () {

    return {

    title: ''

    }

    },

    总结

    以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    展开全文
  • 最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出横向滚动条并没有出现。  查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为...
  • 文字如果超出了自动向左滚动 function scroll(){ var info = document.getElementById('info'); var div = info.getElementsByTagName('div')[0]; var p = document.getElementsByTagName('p')[0]; var ...
  • 解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条。 解决时的问题就是,设置了宽度,横向滚动条却不出现,如下图所示,直接将超出的文字隐藏,并且后面添加省略号 最后我添加了如下的...
  • 一、div变滚动轴效果 ... //横向滚动,左右滚动 overflow-y: scroll; overflow-x: hidden; white-space: nowrap; 二、文字超出省略 css代码 //单行超出省略 width: 200px; overflow: hidden; white
  • 问题描述(如图):div等块级元素默认宽度为100%,当页面渲染完后其宽度已经固定,这时候如果文字超出其宽度(如调用api后显示的结果),我们如果希望其出现滚动条,这时超过原宽度的部分背景可能跟文字背景不一样。...
  • 场景一: 拉伸浏览器宽度,不想让页面变形显示横向滚动条,该怎么设置? 解决方法: 给你想要的这块区域设置一个最小宽度 min-width复制代码 然后在他的父元素设置 overflow-x:hidden复制代码场景二: 拉伸浏览器屏幕时,...
  • 之前项目上有个需求就是:多个div在一个容器下横向布局,且实现滚动效果。...如果这里的文字超出了div的宽度,设置这个属性是没有问题的,但是目前的需求是想让如下的项目们都能排成一排 <div id
  • 文字换行

    2018-11-03 22:17:00
    为行内元素设置width是无效的,但块级元素可以,所以文字不会超出span(即便出现横向滚动条),但会超出div 让div内的文字自动换行的三条CSS代码 white-space:normal; word-break:break-all; word-space:normal; ...
  • 文字内容横向或者纵向滚动文字只在区域内显示,超出区域部分不显示 相关头文件 "2d/CCClippingNode.h" 注意:在cocos2dx 3.x版本中,方法名中的CC命名方式已经弃用,但是文件名中的CC依然有,所以此处的头文件名中...
  • 在vue中是文字换行

    千次阅读 2019-12-23 15:02:34
    今天遇到一个问题,在显示静态资源没有请求接口的时候显示的数据可以进行换行,但是访问了接口后返回的数据正常,但是显示超出屏幕出现横向滚动条,找了半天的原因,发现可以用css进行操作 对你要进行操作的盒子进行...
  • 定义一个定宽的容器,然后图片不换行并排显示,超出部分隐藏,隐藏x轴滚动条; 左右按钮点击,获取容器的滚动条位置,在此基础上加上固定移动距离,然后重置容器滚动条位置。 做法 左右箭头可以使用图片,我这里使用...
  • edit 和消息传递 编辑框控件的窗口类名是edit。除了子窗口常用的风格 WS_CHILD...当输入文字超出横向显示范围时自动滚动(一般必选)。 ES_AUTOVSCROLL 当输入文字超出纵向显示范围时自动滚动。 ES_CENTER 文本...
  • 一、 编辑框控件的窗口类名是edit。除了子窗口常用的风格 WS_CHILD...当输入文字超出横向显示范围时自动滚动(一般必选)。 ES_AUTOVSCROLL 当输入文字超出纵向显示范围时自动滚动。 ES_CENTER 文本居中对齐。 ...
  • 2、el-tree组件文字超出容器不出现横向滚动条问题 .el-tree>.el-tree-node{ min-width:100%; display: inline-block; } 3.组件绑定原生事件使用.native修饰符 <el-button size="small" t...
  • 小程序scroll-view中文字不换行问题

    千次阅读 2018-04-23 19:07:44
    时控制文字超出显示省略号,要求如图: 但实际中会出现如文字不换行或样式错乱的问题。横向滚动的实现如下:超过两行显示省略号:.scroll_txt{ word-wrap: break-word; display:-webkit-box; overflow...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

文字超出横向滚动