CSS / jQuery - разрыв строки с css и jQuery

Question

Я использую скрипт, который скрывает текст, и этот текст отображается только тогда, когда пользователь наводит указатель мыши на поле

Однако я не смог разбить текстовую строку, как я мог это сделать это?

Я использую. net с бритвой

ScreenShots

Просмотр

<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;
}

Answer 2

word-break: break-word амортизируется. Вместо этого используйте word-break: break-all.

MDN: разрыв слов

Вместо word-wrap (что не является стандартным), используйте overflow-wrap MDN .

От MDN: Первоначально свойство являлось нестандартным и без префикса расширением Microsoft, называемым переносом слов, и было реализовано большинством браузеров с тем же именем. С тех пор он был переименован в overflow-wrap, а перенос слов - псевдоним.