javascript - 如何将文本换行到 DIV 中的下一行而不离开屏幕

Question

我有以下 jquery(Easy Tooltip 插件的一部分 [ https://gist.github.com/monkeymonk/3028852] )，它将 DIV 显示为程式化的工具提示:

$(this).hover(function(e){
    content = (options.content != '') ? options.content : title
    content = (options.useElement != '') ? $('#' + options.useElement).html() : content
    $(this).attr('title', '')

    if(content != '' && content != undefined){
        $('body').append('<div id="' + options.tooltipId + '">"' + content + '</div>')
        $('#' + options.tooltipId).css({
            position: 'absolute'
            , top: (e.pageY - options.yOffset) + 'px'
            , left: (e.pageX + options.xOffset) + 'px'
            , display: 'none'
        })
        .fadeIn('fast')
    }
}

CSS:

#easyTooltip {
    padding: 5px 10px;
    border: 1px solid #227DD2;
    background: #195fa4;
    color: #fff;
    white-space: pre-wrap;
    width: 165px;
    overflow: visible;
}

显示以下内容:

如何修改CSS或函数

• 白色文本环绕 easyToolTip DIV 的宽度，而不是如上所示溢出到蓝色框外？ (word-wrap: break-word 修复它)
• 现在，当我移动鼠标时，蓝色框也会随之移动。如果我向右边缘移动太多，蓝色框会继续离开屏幕，这会强制出现水平滚动条。无论我的鼠标向右移动多远，我如何强制蓝色框保持在边缘内，以便它不显示水平滚动条？

Answer 1

你可以限制工具提示的水平位置(加上它自己的宽度)小于窗口的宽度:

var maxLeft = window.innerWidth - 165;
var left = e.pageX + options.xOffset;
if (left > maxLeft)
    left = maxLeft;

另一种方法是尝试 jQuery UI 的 Tooltip widget .