largura, largura máxima não se aplica a <td>

0
Voto

Preciso definir a largura máxima para o caso de o texto ficar muito longo. Eu tentei definir"largura"e"largura máxima", mas sem sucesso.

Eu preciso definir a largura máxima para o meu caso o texto seja muito longo. Tentei definir"largura"e"largura máxima", mas sem sucesso.

Agora, como fica com o texto muito longo.

Agora como fica com o texto muito longo.

texto muito longo

texto muito longotexto muito longo
<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=>descrição)

Meu problema está em

Meu problema está em
<td>
@Html.DisplayFor(m=> description)
</td>
<td> @Html.DisplayFor(m=> description) </td> @Html.DisplayFor (m=>descrição)

Tentei esta solução:

Tentei esta solução:
<td>
<p style="max-width:60ch">@description</p>
</td>
<td> <p style="max-width:60ch">@description</p> </td>

@descrição

Mas o resultado na segunda tela:

Mas o resultado na segunda tela:

text override

text overridesubstituição de texto

ATUALIZAÇÃO: Obrigado pelos conselhos! Eu tentei isso

ATUALIZAÇÃO: Obrigado pelos conselhos! Eu tentei isso
.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 { espaço em branco: nowrap; estouro: oculto; estouro de texto: reticências; largura máxima: 60ch; }

e funciona. MAS! Tenho outro problema: quando minimizo a janela, quero cortar mais o texto. Como implementar isso?

e funciona. MAS! Tenho outro problema: quando minimizo a janela, quero cortar mais o texto. Como implementar isso?

Fonte

css html razor

1 -Julien Baldy

3 -Pete

1 Responda
0
Voto

Isso funciona bem:

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

Você pode interessar

© 2021   OlaMundo.Org