javascript - 如果宽度 > 420，悬停时移动文本

Question

我想当你悬停 div article_head 时，检查 span 宽度，如果它大于 420px(parrent div width - article_head) 移动文本以查看它的整体.我知道，这有点复杂......

Example:

现在，当您悬停“如何安装 Windows...”时，它会移动文本并显示

<div class="article_head"><span>Text with bigger width than 420px</span></div>

.article_head span{
    font-size: 40px;
    font-weight: 300;
    line-height: 110% !important;
    text-transform: none !important;
    white-space:nowrap;
}
.article_head{
    line-height: 110% !important;
    margin:-10px 0 10px;
    height: 50px;
    overflow: hidden;
    width:420px
}

我试了几次都没有成功...

Answer 1

您可以做的是使用.scrollLeft 方法在文章头部滚动。您可以通过评估 htmlElement.scrollWidth - htmlElement.clientWidth

来计算最大滚动位置

所以你可以实现两个功能:一个向右滚动:

function move(htmlElement) {
    console.log(htmlElement);
    htmlElement.scrollLeft = htmlElement.scrollWidth - htmlElement.clientWidth;
}

以及重置滚动位置的函数:

function moveBack(htmlElement) {
    htmlElement.scrollLeft = 0;
}

看看这个例子:http://jsfiddle.net/2ysP7/