Bonjour !

Voilà j'essaye de faire un système de news rien de foufou mais la zone que je donne pour le texte, en zoomant, part en cacahuète

J'ai fais un overflow : hidden-x mais le texte va looooooin.

Voici le bout d'html/php

echo "<div class='news'>";
					echo "<div class='entete_news'>";
						echo "<h3 class='titre_news'>".$titre."</h3>";
						echo "<span class='date_news'> -&nbsp;".$date."</span>";
					echo "</div>";
					
					echo "<div class='contenu_news'>";
						echo "<img class='image_news' src="."actu/images/".$photo.">";
						echo "<p class='message_news'>".$contenu."</p>";
					echo "</div>";	
					
				echo "</div>";

Voici le bout de CSS
.contenu_news .message_news { position : absolute; display : inline-block; margin : 0; margin-left : 10px; }

Franchement j'ai essayé la largeur en pourcentage, en fixe, rien ne marche, le texte ne revient pas à la ligne automatiquement quand je zoome

Merci de m'aider

Tu peux utiliser la propriété CSS word-wrap avec la valeur break-word :https://developer.mozilla.org/fr/docs/Web/CSS/word-wrap

ça permet aux mots trop longs de retourner à la ligne au lieu de dépasser le conteneur. Après je suis pas sûr que ça permet de régler ton problème de zoom, mais tu peux toujours essayer

Yo, merci du conseil mais ça ne marche pas
Enfaite le texte ne dépasse pas du div, c'est le div s'élargit énormément

regarde ici

https://plnkr.co/edit/E4AE4AId9aacmMINtsaYEai?p=preview

PLusieurs questions. Pourquoi ton contenu news est en inline block ? ne peut il pas rester en block ? pourquoi en position absolute ?

Perso pour atteindre le meme résultat je ferais plutot comme ça :

<div class="news">
-----<div class="entete-news">
----------<h3></h3>
----------<span></span>
-----</div>
-----<div class="contenu-news">
----------<img><!--
---------- --><p></p>
-----</div>
</div>

avec pour le css:

.news{
-----padding: 10px;
}

img, p {
-----display: inline-block;
-----vertical align: top;
}

p {
-----padding: 10px;
}

Donne une largeur à news et une largeur et hauteur à ton image, Le reste devrait suivre je pense

ps: dans le code html je mets

<img><!--
--><p></p>

Ce commentaire est une astuce pour le display inline-block. Tous les navigateurs mettent par défaut un margin de qq pixels entre les éléments en inline-block. Le commentaire permet de supprimer cela.

Petit complément à mon code après l'avoir testé.

rajoute au début du css

• {padding: 0px; margin: 0px; box-sizing: border-box;} Ca permettra d'enlever tous les margins et paddings par défauts et box-sizing: border-box permet de dire que si tu met 400px de largeur à une div et 10 de padding celle-ci fera bien 400px et non 410 (personellement je préfère).

Tu devrais aussi rajouter une largeur à p en fait.

Par exemple si news fait 500px et ton image 100px de large. Mets 380px pour p (et non 400 à caus du padding de news )

Bien sur tous ça c'est pas pour du responsive ;) en espérant que j'ais pu t'aider