[Résolu] Placement d'un texte

Bonjour à tous
Je suis actuellement en train de réaliser un sondage auprès de certaines personnes.
La question est "êtes vous intéressé à participer à cet évènement ?
Les réponses possibles sont "oui", "non", "je ne sais pas encore"
En plus les personnes peuvent ajouter un commentaire.
J'obtiens actuellement le résultat suivant (où j'ai flouté les images et les textes)

Quand on clique sur * en bas à droite de l'image, le texte de commentaire s'affiche sur un fond jaune qui disparait quand on clique dessus.
Mon problème:
la zone "réponse" se remplit en fonction des réponses reçues.
Selon le nombre de réponses et la taille de l'écran il est possible que le texte du commentaire déborde de l'écran.
J'ai déjà traité dans le passé le même problème en déclenchant un script js qui tient compte de la taille su texte et de la position de la <figure> à la quelle il est rattaché.
Ce que j'aimerais c'est une solution purement CSS à ce problème.
Auriez vous une solution à proposer ?
Merci de votre aide.

Comment c'est fait:
- chaque bloc de réponses est un <ul>
- chaque réponse est

  <li>
    <figure>
      <img le portrait de la personne>
     <figcaption> le nom de la personne
            <button>*
                 <aside>le commentaire></aside>
            </button>
      </figcaption>
    </figure>
</li>

L'apparition du commentaire est fait par un event listener sur le <button>, la disparition par un event listener sur l'<aside>
Modifié par PapyJP (08 Dec 2025 - 13:08)

Salut,
avec un peu plus de code css, ce serait peut-être plus facile à voir.
Tu as sans doute défini une hauteur et une largeur à ta boîte de texte, ce qui entraîne automatiquement le débordement de texte. Le navigateur (en réalité le css) considère alors que tu connais d'avance la taille de ton texte.
Avec un overflow-x: scroll; sur la boîte du texte, ça résoudra le problème, mais il y aura un ascenseur qui apparaîtra. Ce qui ne t'empêchera pas de définir une largeur à ta boîte.

Ajout : une boîte faite en flex avec height:auto; ferait aussi bien l'affaire.
Modifié par Bongota (08 Dec 2025 - 23:44)

Hello,

Au vu de tes contraintes, j'aurais tendance à dire que la solution pure CSS se trouve du côté de "Anchor Positionning" : https://www.alsacreations.com/tuto/lire/1962-Le-positionnement-par-ancre-anchor-positioning.html

Et plus particulièrement via la propriété position-try qui permet de définir des options de repli appliquées automatiquement quand l’élément déborde (de la fenêtre ou du contenant).

Je te laisse tester (il y a des démos dans l'article) et te faire une idée.

Bonne journée !
Modifié par Raphael (09 Dec 2025 - 07:29)

Merci Raphaël je vais essayer ça.

Bonjour,

"Anchor Positioning" est sans aucun doute très intéressante. Mais attention, pour les tests, il vaut mieux le faire avec Chrome.

Du côté des autres navigateurs, ça bouge aussi. On sait déjà que Firefox va supporter la fonctionnalité, mais la version qui le fera en "standard" ne sera déployée qu'en Janvier 2026 semble-t-il.

Les derniers Safari supportent aussi la fonctionnalité à partir des versions 26.x, mais le déploiement de ces versions est extrêmement récent (ces derniers mois), et pas sur toutes les machines (seulement les machines assez récentes).

Amicalement,

En regardant de près, je me rends compte que cela semble difficile à mettre en oeuvre dans mon environnement. Je ne connais pas a priori le nombre de réponses et le nombre de commentaires. Ma page est générée presque entièrement par js à partir de données provenant de la base de données. Il faudrait donc générer également le css correspondant.
Il est finalement plus simple de revenir à ma solution précédente en js.
Modifié par PapyJP (09 Dec 2025 - 17:40)