28172 sujets

CSS et mise en forme, CSS3

[Résolu] Débordement de ligne

Bonjour à tous
J'ai une <table> dans laquelle les cellules contiennent des vers (au sens "poésie" du mot Smiley lol )
La coutume pour les vers c'est que:
1) le texte est cadré à gauche
2) mais si le vers déborde de la largeur de la cellule la ligne de débordement est cadrée à droite,
Comment faire ça simplement en CSS ?
Merci de votre aide.
Merci de ta réponse.
Non ce n'est pas ça que je cherche à faire
Regarde https://www.alma-musica.net/html/partitions/Dvorak/V-prirode-05.lyr, tu pourras jouer avec le fichier css.
La colonne de droite (traduction en français) a des lignes plus longues que la colonne de gauche (langue originale) ou celle du milieu (phonétique).
C'est dû au fait qu'une traduction soit plus ou moins faire des périphrases.
Sur mon PC, j'ai deux écrans, un en 16/9, l'autre en 4/3
Sur l'écran 4/3 j'ai
upload/1634674899-48769-pliure1.png
le mot "coeur" est à gauche de la 3ème colonne dernière ligne.
Je cherche à obtenir le résultat suivant: upload/1634675037-48769-pliure2.png
c'est à dire que le mot "coeur" se retrouverait à droite de la colonne.
C'est par curiosité que je pose la question, je ne suis pas sûr du tout de le mettre en œuvre.
Si je mets la cellule en text-align:right, j'obtiendrai le bon résultat, mais les autres lignes seront cadrées à droite, ce qui n'est pas ce que je cherche.

Dans Cyrano de Bergerac les rimailleurs qui vivent aux crochets du pâtissier sont décrits pas sa femme comme "Vos méchants écriveurs de lignes inégales" Smiley biggrin
Modifié par PapyJP (19 Oct 2021 - 22:33)
Modérateur
Il y aurait text-align-last:right; qui alignerait à droite la derniere ligne, mais, si'il il n'y a qu'une ligne , cette ligne est aussi la dernière ...

Comme il y a 3 cellules côtes à cotes, on peut éventuellement casser l'affichage en tableau de la dernière cellule en la faisant flotter et ainsi ne pas avoir le text-align avoir une incidence visuelle tant que le text tient sur une ligne, le flottement à gauche le poussera à gauche.

Exemple de pansement à tester :

td[lang="fr"] {
	text-align-last: right;
	float:left;/* réduit la largeur de  la cellule en la poussant à gauche jusqu'au moment ou toute la largeur est occupée , provoquant un retour à la ligne du texte */
}


Cdt

edit:

Pour la seconde partie en colonne, tu peut tester ce complément pour inclure les .verse en français .


td[lang="fr"] , section.version.translation[lang="fr"] .strophe  .verse{
	text-align-last: right;
	float:left;
} 

section.version.translation[lang="fr"] .strophe {
	overflow:hidden;
}

Modifié par gcyrillus (20 Oct 2021 - 19:19)
Meilleure solution
Sujet clos
Aller à