Ceci est mon code:
p>
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>3 Réponses :
Vous devez définir la propriété https://developer.mozilla.org/en-us/docs/web/css/flex-basis p> Vous définissez également la hauteur de tous les P> P > flex-flex code> de div # trois code>, div # deux code> et div # quatre à quelque chose comme 33.3% code> div code> s sur 100vh code> et lorsque le débordement se produit sur vos éléments de bloc interne, il ne sait pas où arrêter si vous ne tronquez pas le texte: https://css-tricks.com/flexbox-trunated-text/ p>
<div id="one">
<div id="two">
</div>
<div id="three">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div id="four">
</div>
</div>
Et vous pouvez probablement obtenir les autres divs ( deux et quatre ) pour être la même largeur que div # trois en entrant du contenu. Découvrez Bootstrap. Cela fait tout cela pour vous.
Vous essayez essentiellement de faire cela: getbootstrap.com/docs/4.0/layout/grid < / a> Il suffit de télécharger bootstrap et d'utiliser le CSS pour ligne et col .
Mais dans les zones bleues devrait être du texte plus tard, et le avec les boîtes bleues devrait correspondre exactement au texte avec ... Je pense que cela ne m'aidera pas. Mais merci!
@AnaNA_B C'est parce que vous débordez de l'élément de bloc intérieur défini sur 100vh . Vérifiez la réponse mise à jour - J'ai inclus une section sur le texte tronquant dans Flexbox. Vous êtes question n'est pas très clair sur ce que vous entendez par «détruire» les zones bleues. CSS-Tricks.com/flexbox-Ronced-text
@Anna_b Peut-être que c'est ce que tu veux dire? Vérifiez l'extrait mis à jour.
Qu'est-ce que @tmani afif ( jsfiddle.net/u8vrp0l4/1 ) est presque ce dont j'ai besoin. Mais cela ne fonctionne pas pour ma question mise à jour ...
@Anna_b je ne comprends toujours pas le problème assez bien. La flexbox elle-même n'est pas "détruite". C'est comme ça que Flexbox est censé se comporter. Alors, peut-être que vous pourriez me dire plus sur ces zones bleues? L'objectif n'est pas clair.
Si vous prenez le code de ma question: le texte de la zone #Text devrait rester dans une ligne. Ce devrait être une chapitre de chapiteau plus tard.
@Anna_B Consultez la réponse mise à jour. Si vous ne voulez pas que les sections bleues puissent aller la hauteur de la fenêtre, supprimez la hauteur : 100vh; de votre div s
@AnaNA_B Si vous souhaitez ajouter des ellipsis au maquillage, utilisez-le sur Text-Overflow: Ellipsis;
Hmh. Je pense que cela fonctionne en général, mais pas pour ma question mise à jour.
Assurez-vous de réagir à la réponse si cela vous aide.
@Anna_b Désolé, vous pourriez peut-être poster une illustration de ce que vous essayez d'atteindre? Je ne comprends toujours pas le but.
Selon MDN , réglage Mais pour tout garder dans la fenêtre de la fenêtre et garder les barres bleues autour du texte, vous devriez d'abord envelopper votre texte lorem ipsum dans une balise p> Espace blanc: Nowrap code> "supprime les pauses de la ligne (emballage de texte) dans la source." Cela signifie que toutes vos pauses de ligne seront parties pour cet élément et cela passera horizontalement tant qu'il y a du texte. p code> p autre élément texte, puis changez votre CSS à quelque chose comme ceci: p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div id="one">
<div id="two">
</div>
<div id="three">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div id="four">
</div>
</div>
</body>
</html>
the dvs ce qui signifie que pour chaque div devrait: calculer la "meilleure" largeur (flex-base: auto), S'il y a suffisamment d'espace pour les trois divs, il n'est pas nécessaire de croître pour le remplir (flex-poussser: 0), s'il n'y a pas assez d'espace les rétrécir proportionnellement (flex-rétrécissement: 1). P> Lorsque vous mettez Ajouter puisque vous avez maintenant une nouvelle div et Bouton à l'intérieur de DIV p> deux code>, trois code> et quatre code> ont eu le flex code> Propriété définie sur ses valeurs par défaut: p> blanc-espace: Nowrap; code> dans le trois code> div, il n'y a pas assez d'espace (car il "la meilleure" largeur sera autant que nécessaire pour tenir la seule ligne longue de texte. p> flex-rétrécissement: 0 code> sur les DIV bleues, et Flex-Grow: 1 code> et Overflow: auto code> à la DIV centrale. De cette façon, les DIV bleues auront toujours une largeur de 45px et le centre remplira toujours l'espace restant. p> trois code>, il y a quelques modifications supplémentaires: nous ferons également la div accorder trois code> également un conteneur Flex et définir Flex-Garnir et flex-rétrécir à des valeurs appropriées pour le texte interne et le bouton. p>
<div id="one">
<div id="two">
</div>
<div id="three">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div id="button">Button</div>
</div>
<div id="four">
</div>
</div>
Hé, ça a l'air très bien. Mais je devais mettre à jour ma question. Et si je viens de le faire comme si tu l'as fait ici, alors ça ne marche pas, malheureusement.
Il n'y a pas d'espace blanc dans votre code. Définissez également ce que vous entendez par détruire
Avez-vous essayé débordement: auto au lieu de min-largeur: 0?
Hey, merci pour votre réponse! J'espère que ma question est maintenant plus claire. "Overflow: auto;" Malheureusement, ne fait pas une différence.
êtes-vous sûr? jsfiddle.net/u8vrp0l4/1
D'accord, désolé. Vous avez raison! Mais je devais éditer la question parce que la mise en page que je travaille est un peu différente.
Ajouter min-largeur: 0 à trois et trop déborder automatiquement au texte à l'intérieur