larghezza, larghezza massima non si applicano a <td>

0
Vote

Devo impostare la larghezza massima per il mio testo nel caso in cui il testo sarà troppo lungo. Ho provato a impostare"larghezza"e"larghezza massima", ma senza successo.

Devo impostare la larghezza massima per il mio nel caso in cui il testo fosse troppo lungo. Ho provato a impostare"larghezza"e"larghezza massima", ma senza successo.

Ora come appare con il testo troppo lungo.

Ora come appare con il testo troppo lungo.

testo troppo lungo

testo troppo lungotesto troppo lungo
<tr>
<td class="no-wrap">
<div class="grid-item-margin-left">@Html.DisplayFor(m=> checkListItem.StepNumber).</div>
</td>
<td>
@Html.DisplayFor(m=> description)
</td>
<tr> <td class="no-wrap"> <div class="grid-item-margin-left">@Html.DisplayFor(m=> checkListItem.StepNumber).</div> </td> <td> @Html.DisplayFor(m=> description) </td>
@Html.DisplayFor (m=>checkListItem.StepNumber).
@Html.DisplayFor (m=>descrizione)

Il mio problema è in

Il mio problema è in
<td>
@Html.DisplayFor(m=> description)
</td>
<td> @Html.DisplayFor(m=> description) </td> @Html.DisplayFor (m=>descrizione)

Ho provato questa soluzione:

Ho provato questa soluzione:
<td>
<p style="max-width:60ch">@description</p>
</td>
<td> <p style="max-width:60ch">@description</p> </td>

@description

Ma il risultato nella seconda schermata:

Ma il risultato nella seconda schermata:

text override

text overridesostituzione del testo

AGGIORNAMENTO: Grazie per i consigli! Ho provato questo

AGGIORNAMENTO: Grazie per i consigli! Ho provato questo
.long-text-trim {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 60ch;
}
.long-text-trim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; } .long-text-trim { spazio bianco: nowrap; overflow: nascosto; text-overflow: ellissi; larghezza massima: 60ch; }

e funziona. MA! Ho un altro problema: quando riduco a icona la finestra, desidero tagliare di più il testo. Come implementarlo?

e funziona. MA! Ho un altro problema: quando riduco a icona la finestra, desidero tagliare di più il testo. Come implementarlo?

Source

css html razor

1 -Julien Baldy

3 -Pete

1 Answer
0
Vote

Funziona bene:

.long-text-trim {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 20vw;
}
Source

Potreste essere interessati

© 2021   Risposta.org