Dev Faq
0
votes

Comment avoir des pauses en ligne dans une cellule de table uniquement après une largeur maximale dans CSS

J'ai une table avec des cellules pouvant avoir un long contenu. Je souhaite afficher le contenu sans pauses de ligne s'il ne dépasse pas une certaine largeur.

Si la table dépasse la largeur de l'élément parent, le comportement par défaut consiste à tout briser le plus tôt possible dans la cellule de la table. La cellule prend la largeur du mot le plus long de la colonne. P>

si j'utilise blanc-espace: Nowrap; code> Il ne casse pas du tout. Si j'applique max-largeur: 60px; code> la cellule ne s'étend pas jusqu'à cette largeur. Disposition de la table: fixe; code> ne fonctionne pas non plus, car la largeur de la table devrait s'étendre si nécessaire. min-largeur: 60px; code> n'est pas ce que je veux, car je veux que les colonnes soient courtes que possible si le texte n'est pas long. p>

Ceci est le comportement par défaut: xxx pré>

et j'aimerais avoir quelque chose comme ceci: p> xxx pré>

dans l'exemple suivant, je voudrais afficher toutes les cellules mais le très long dans une seule ligne. La longue durée devrait casser après une certaine longueur, par exemple après 350px, ce qui serait après devrait code>. La deuxième rangée doit être toutes en une seule ligne: p>

p> 

<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

14 commentaires

Pouvez-vous utiliser JS?

Ajoutez plus de lignes sur votre exemple pour clarifier votre question.

@Rahulverma je veux résoudre ceci en CSS si c'est possible

@Abrsh j'ai ajouté une autre ligne, le problème se pose déjà avec une rangée, bien que

J'ai demandé si BCoz, je pense qu'il n'est pas possible d'obtenir la largeur du mot le plus long dans CSS, vous devrez aller chercher JS. Toutefois, si vous n'avez qu'un mot le plus long dans une colonne, il est possible dans le CSS. Alors avez-vous "le plus longueur" comme un mot unique?

Je ne veux pas casser après le mot le plus long, mais seulement si une certaine largeur est dépassée. Par exemple, après Ceci est un . Casser après le mot le plus long est le comportement par défaut comme vous pouvez le voir dans l'exemple.

Je ne pense pas que tu as ma question. Je demandais que c'est "plus long" mot "le mot de la colonne toujours. Ou avez-vous d'autres mots avec ça?

Non, cela pourrait être n'importe quel texte.

Que vous attendez-vous si vous avez sous "Ceci est une cellule longue" un texte "normal"? Il serait impossible pour la cellule "normale" de rétrécir automatiquement pour envelopper le texte dans votre cas, car vous utilisez la balise

. Ou avez-vous une structure prédéfinie pour votre table? Votre première colonne enveloppera-t-elle toujours un long texte?

@Sebastiani. Je voudrais avoir cette colonne pour avoir la largeur maximale qui est 60px dans mon exemple. Je vais mettre à jour mon exemple HTML pour clarifier cela un peu.

@Sebastiani. J'ai mis à jour l'exemple

OK, je comprends vos besoins, mais vous ne pouvez pas utiliser max-largeur ou maximum hauteur attributs sur les cellules du tableau. Ce que vous pouvez faire est de définir une largeur fixe pour votre cellule de table et d'envelopper le contenu

à l'intérieur d'un
et définissez le de la largeur de DIV à une taille personnalisée. ici vous pouvez voir que le max-largeur pour les cellules du tableau est indéfini dans CSS.

@Sebastiani. Qu'il soit indéfini, cela a quelque chose de sens, car le moteur de layouche de table des navigateurs semble essayer de rendre les cellules de table aussi petit si possible si la table dépasse la largeur des éléments des parents. Cela se met dans la voie de chacun.

Répondu et ensuite vu que vous aviez déjà travaillé pour le faire pour le faire depuis que j'ai commencé à répondre. Va laisser ma réponse dans la mesure où il répond à la question principale que vous avez, non ce n'est pas possible. J'espère qu'une suggestion vous aidera cependant.

3 Réponses :

0
votes

est-ce ce que vous voulez xxx pré>

p> 

<table>
  <tr>
    <td> very long text djfkgjhghggdjgdkdfjext</td>
    <td>LonghgjerWord</td>
    <td>Normal</td>
    <td>This is a long text</td>
    <td>LonjhbvdfjghjdhgerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>Normal</td>
  </tr>
  <tr>
    <td>short</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>LongerWord</td>
    <td>Normal</td>
  </tr>
</table>

3 commentaires

Je ne pense pas que c'est ce qu'il a demandé. De cette manière, tous les TD auront une minute de 60 px, même si le texte est normal ou court .

@Sebastiani. Vous avez raison, j'ai ajouté une colonne supplémentaire à l'exemple.

@ RKV88-Kanyan Même si la dernière colonne apparaît plus petite maintenant, ce n'est pas ce que je veux, si vous n'avez que des mots courts dans une colonne, il se casse toujours bientôt.

0
votes

Essayez cela à la place, 

    td {
        word-break: break-word;
        white-space: pre-line;
        max-width: 150px; // change size as you need
        vertical-align: top;
        /*padding: 5px;*/
        /*border: 1px solid black;*/
    }

0 commentaires
2
votes

Réponse courte

Ce que vous voulez n'est pas possible. Vous ne pouvez pas conserver le HTML actuel, ajouter une largeur maximale à une cellule de table, garder les cellules de table à leurs largeurs minimales et que les mots se rompent sans utiliser JavaScript. P>

Il existe toutefois quelques bonnes alternatives qui s'appliquent à la plupart de votre Conditions requises. P>

Option 1 - Overflow dans une cellule. H2>

en appliquant blanc-espace: Nowrap code> et Overflow-y code> vous peut utiliser max-largeur code>. Le côté bas est que vous devez faire défiler dans la cellule. P>

p> 

<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

2 commentaires

J'ai pensé au code JS mais il a insisté sur la solution CSS ... Je veux juste dire que votre réponse est complète et parfaite, vous êtes un trésor pour Stackoverflow Community😘😘😘

Merci Bud! Bien d'être apprécié :-p

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor