Pas de retour à la ligne

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai le résultat suivant :
Pièce jointe 633892
Bien sûr j'aimerai que le texte de ma description revienne automatiquement à la ligne, en restant dans le bloc qui est une <div>.
Code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
              <div class="column" style="background-color:#F0FFFF;">
                <div style="height: 20%">
                  <?php if ($row['produits_etat_vente'] == 0) { ?>
                    <button class="button-etat-product" id="affichage_a_vendre" role="button">Disponible</button><?php
                  } elseif (($row['produits_etat_vente']) == 1) { ?>
                    <button class="button-etat-product" id="affichage_vendu" role="button">Vendu</button><?php
                  } ?>
                </div>
                <div style="height: 60%">
                  <span class="categorie" height="20%">Nom du produit : </span><span class="ingredient"><?php echo $row['produits_nom']; ?></span><br>
                  <span class="categorie">Date de publication : </span><span class="ingredient"><?php echo $row['produits_nom']; ?></span><br>
                  <span class="categorie">Description : </span><span class="ingredient"><?php echo $row['produits_description']; ?></span><br>
                  <span class="categorie">Qualit&eacute; du mat&eacute;riau : </span><span class="ingredient"><?php echo $row['produits_qualite']; ?></span><br>
                  <span class="categorie">Marque du tissu : </span><span class="ingredient"><?php echo $row['produits_marque']; ?></span><br>
                </div>
                <div style="height: 20%">
                  <div id="prix_produit">
                      <p><?php echo $row['produits_prix']; ?> &euro;</p>
                  </div>
                </div>
              </div>

Merci!

07/02/2023, 22h27
ProgElecT

Salut

Ta ligne 9, peut être

Code:

<div style="height: 60%" style="overflow: hidden;">

ou

Code:

<div style="height: 60%" style="overflow: auto;">

au choix.
08/02/2023, 08h30
Zarkoffe

1 pièce(s) jointe(s)

Bonjour,

Merci pour votre retour mais cela ne fonctionne pas.
Le hidden cache le texte qui dépasse, et le second me créé une barre déroulante horizontale de ce type :
Pièce jointe 633913

Cela ne correspond pas à mon besoin, qui est de faire un retour à la ligne automatique lorsque le texte se "cogne" aux bords de ma div (matérialisée par un border black sur les images).
Un peu comme sur n'importe quel site de e-commerce, comme Amazon, etc...
Merci

EDIT : C'est ma faute, en faite le test que j'ai fais est mauvais : j'ai écris"azazaazzezezezez" en un seul mot, donc pas de retour à la ligne. Sinon le mot serait "coupé" en deux. Merci. Résolu !
09/02/2023, 10h38
NoSmoking
Bonjour,

Citation:

j'ai écris"azazaazzezezezez" en un seul mot, donc pas de retour à la ligne.

pour éviter ce genre de situation tu peux utiliser la propriété word-break.
Code:

1 2 3 .retour-ligne { word-break: break-word; }
... même si Deprecated. Not for use in new websites. !