Member Avatar for tunde011

i have got a div with width=600px, but when i put some text inside it, it exceeds the 600px size instead of breaking up and continuing on another line.
i inherited this code and first though maybe it was the positioning declared in the stylesheet or because i dont have a reset.css present. Any help will do, going out of my mind here.

  • 5 Contributors
  • 4 Replies
  • 91 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #445218

Dani AI

Generated

As described, when a fixed-width container still shows text running past its edge the width rule is usually fine — something is preventing line breaks. 's quick test shows normal wrapping behavior, and the divergence means a stylesheet rule or unbreakable content is involved; offered layout tweaks that questioned.

Troubleshoot with the browser inspector: look at the computed values for white-space, overflow-wrap/word-break, display, and any min-width on parent or child elements. Also search the HTML for explicit non‑breaking tokens (&nbsp;, <nobr>) or preformatted blocks. To allow long tokens to break without aggressive mid-word chopping, try:

/* prefer overflow-wrap to allow breaks inside long tokens */
.container, .container p {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* if the text is inside a flex item that refuses to shrink */
.flex-item {
  min-width: 0;
}

Cautions: word-break: break-all will break words in the middle and can harm readability; hyphens: auto needs proper lang to hyphenate. If nothing obvious appears, create a minimal reproducible HTML+CSS example (no frameworks) so others can inspect the computed styles and DOM. Useful references: white-space, overflow-wrap, min-width.

Recommended Answers

All 4 Replies

Member Avatar for colweb

Must have something to do with your css or declarations before this div. If I try this:

<body>
	<div style="width:500px; background-color:red;">
		<p>And now we put a lot of text inside this div to see what is going to happen.</p>
	</div>
</body>

the text is on two lines, the first breaks after "is". Maybe you could post (part) of the code where it goes wrong.

Edited by colweb because: n/a
Member Avatar for brahimhackman

add this text-alight:justify;float:left;
and set your margin-l and r

Member Avatar for Member #120589

add this text-alight:justify;float:left;
and set your margin-l and r

I wouldn't.

Member Avatar for Member #445218

I wouldn't.

Can you provide eventually a link to the page or give us the css and the html to see what happens ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.