解决layui tips连续英文和数字不换行问题

54 阅读1分钟

JS

/**
 * 查看某字段详情
 * @param value
 * @param id
 */
function view(value,id) {
    if(isNull($.trim(value))){
        var width=getTextWidth(value);
        if(width>200){
            width='200px';
        }else {
            width='auto';
        }
        layer.tips('<span style="word-wrap: break-word;">'+value+'</span>',id, {//控制换行
            tips: [1, '#0bcc0a'],
            time: 2000,
            area: [width, 'auto']
        });
    }
}
/**
 * 获取一段文本具体长度为多少px
 * @param str
 * @returns {number}
 */
function getTextWidth(str) {
    var width = 0;
    var html = document.createElement('span');
    html.innerText = str;
    html.className = 'getTextWidth';
    document.querySelector('body').appendChild(html);
    width = document.querySelector('.getTextWidth').offsetWidth;
    document.querySelector('.getTextWidth').remove();
    return width;
}

关键语句:<span style="word-wrap: break-word;">'+value+'</span>