Member Avatar for Venom Rush

Hi there

I have a really long web link that I want to break onto a new line because it's longer than the width of the div. At the moment it makes an incredible amount of empty space above it until the div is below the div next to it.

Anyone know of any solutions to this?

P.S. It breaks fine in IE but when I view the page in Firefox it's a mess.

  • 3 Contributors
  • 5 Replies
  • 110 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

Firefox was tripping over a single, unbreakable URL; that’s why the link pushed the layout down while IE handled it differently. ’s suggestion to show friendly text is good for UX, and ’s server-side replacement works, but there are simpler client-side fixes that keep the link clickable and readable.

A reliable CSS-first approach is to let the browser break long words inside the anchor or its container:

.yourDiv a {
  white-space: normal;
  overflow-wrap: break-word;   /* modern standard */
  word-wrap: break-word;       /* legacy alias for older browsers */
  /* use word-break: break-all only as a last resort (it breaks inside words) */
  max-width: 100%;
}

If you can modify the output (as did server-side), inserting explicit break opportunities at safe places—slashes, dots—gives you precise control without forcing awkward breaks. The HTML <wbr> tag (or an inline zero-width space) lets the browser wrap the visible URL while keeping it one clickable link, and it’s preferable to splitting the link into multiple anchors.

Extra notes: avoid word-break: break-all unless breaking inside words is acceptable; prefer readable link text when possible for accessibility; and test with the actual layout model you use (floats, flexbox, grid) since inline-block/display rules can affect wrapping. See overflow-wrap and the wbr element for details.

Recommended Answers

All 5 Replies

Member Avatar for sreein1986

first when you insert div tag check that div tag properties and define width and height size then check in IE

Member Avatar for MidiMagic

Display the title of the page instead of the link. Or do something like this:

<p><a href="this.is.the/really/long/url.htm">this.is.the/</a>
<br />really/long/url.htm</p>

Or even this:

<p><a href="this.string.is.the/really/long/url.htm">this.string.is.the/</a>
<br /><a href="this.is.the/really/long/url.htm">really/long/url.htm</a></p>

The last one makes both pieces of the link text active.

Member Avatar for sreein1986 
<html>
</html>
Edited by happygeek because: fixed formatting
Member Avatar for Venom Rush

Thanks for the response everyone, I ended up using php to replace long links in the way MidiMagic suggested.

P.S. It's for a small admin system. I'm not the one inputting the data ;)

Member Avatar for sreein1986

pls put it mark as soved if solve the probelm

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.