jquery - CSS/jQuery - 使用 css 和 jQuery 换行

Question

我正在使用隐藏文本的脚本，并且仅当用户将鼠标悬停在字段中时才会显示该文本

但是，我无法中断文本行，我该怎么做？

我正在使用 .net 和 razor

屏幕截图

查看

<tr>
                <td colspan="10" style="padding-bottom: 0px;">
                    <div id="collapse_@(item.Id)" class="collapse in">
                        <table class="table">
                            <thead class="thead-light">
                                <tr>
                                    <th colspan="11">
                                        Observações
                                    </th>
                                </tr>
                                <tr>
                                    <td colspan="6">

                                        <p class="txt-note">
                                            @Html.DisplayFor(modelItem => item.Observacao)
                                        </p>
                                    </td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </td>
            </tr>

jQuery

function adjustFieldNote() {
    $('.txt-note').on('mouseover', function (e) {
        var $el = $(this);
        $el.addClass("open");

    });

    $('txt-note').on('mouseout', function (e) {
        var $el = $(this);
        $el.delay(1500).removeClass("open");
    })
}

CSS

.txt-note {
    width: 800px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break:break-all
}



.open{
    white-space: normal !important;
    overflow: unset !important;
    text-overflow: initial !important;
    width: 100% !important;
    height: 100% !important;
    word-break: break-all
}

Answer 1

使用这个 CSS 片段:

.txt-note {
    width: 800px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}