MVC5中span截断文本hover显示title的赋值问题

嘿，我来帮你搞定这个title属性的问题！你现在的核心问题是：当选中复选框后，只更新了span的截断显示文本，但没有同步把完整的未截断内容设置为span的title属性，所以鼠标悬停时看不到完整内容。

下面分两种情况给你解决方案：

情况1：手动JS截断文本 #

如果你的截断逻辑是通过JavaScript手动处理的，那只需要在生成截断文本的同时，把完整内容赋值给title属性即可：

function setPayment() {
    // 1. 获取所有选中的支付选项，拼接成完整的文本（根据你的实际DOM结构调整选择器）
    var fullPaymentText = $('input[name="payment-option"]:checked').map(function() {
        // 假设复选框对应的文本在相邻的label里，你可以根据实际情况修改这里
        return $(this).next('label').text();
    }).get().join(', ');

    // 2. 定义截断规则，比如超过25个字符就加省略号
    var maxDisplayLength = 25;
    var truncatedText = fullPaymentText.length > maxDisplayLength 
        ? fullPaymentText.substring(0, maxDisplayLength) + '...' 
        : fullPaymentText;

    // 3. 同时更新span的显示文本和title属性
    $('#payment-sum')
        .text(truncatedText)
        .attr('title', fullPaymentText); // 关键：把完整文本设为title
}

情况2：用CSS自动截断文本 #

如果你的截断是靠CSS的text-overflow: ellipsis实现的，那更简单——直接把完整文本同时设置给span的内容和title，CSS会自动处理显示截断：

首先给span加CSS样式： #

#payment-sum {
    display: inline-block;
    max-width: 200px; /* 你需要的最大显示宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

然后修改JS函数： #

function setPayment() {
    // 获取完整的选中支付选项文本
    var fullPaymentText = $('input[name="payment-option"]:checked').map(function() {
        return $(this).next('label').text();
    }).get().join(', ');

    // 同时设置span的内容和title
    $('#payment-sum')
        .text(fullPaymentText)
        .attr('title', fullPaymentText);
}

最后别忘了绑定复选框事件 #

要确保在复选框状态改变时触发setPayment()函数，页面加载时也初始化一次：

$(document).ready(function() {
    // 页面加载完成后先初始化一次（处理默认选中的复选框）
    setPayment();

    // 当复选框选中状态改变时更新内容
    $('input[name="payment-option"]').on('change', setPayment);
});

这样调整后，当你选中复选框时，span会显示截断后的文本，鼠标悬停时就会弹出完整的内容啦！

内容的提问来源于stack exchange，提问作者toofaced