CODEWITHSUNDEEP
jquerycss
AllPower
AllPower

Reputation: 195

CSS / jQuery - Line break with css and jQuery

I'm using a script that hides the text, and that text is only displayed when the user hovers the mouse in the field

However, I was unable to break the text line, how could I do this?

Im using .net with razor

ScreenShots

Without Mouse Hover

With Mouse Hover in the field

View

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

Upvotes: 1

Views: 302

Answers (2)

Diogenis Siganos
Diogenis Siganos

Reputation: 797

Use this CSS snippet:

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

Upvotes: 2

Ajit Panigrahi
Ajit Panigrahi

Reputation: 792

word-break: break-word is depreciated. Use word-break: break-all instead.

MDN: word-break

Instead of word-wrap (which is non-standard), use overflow-wrap MDN.

From MDN: The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

Upvotes: 0

Related Questions