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.

  • 2 Contributors
  • 2 Replies
  • 80 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

This is a cross-browser wrapping issue with long, unbroken strings (URLs). noted it displays OK in IE but not in Firefox; that happens because browsers apply different default line-breaking rules. The simplest, reliable fix is to let the containing element permit breaking inside long words and keep normal whitespace handling.

Try adding these rules to the container or the anchor:

.yourDiv, .yourDiv a {
  white-space: normal;
  overflow-wrap: break-word; /* modern, preferred */
  word-wrap: break-word;     /* legacy alias, widely supported */
  /* word-break: break-all;  use only if you must break anywhere */
}

If you want more control over where a very long URL can break, insert explicit break opportunities in the HTML using the <wbr> tag (place it after slashes, dots, or other safe break points) or use the soft-hyphen entity &shy;. Those techniques avoid breaking words in odd places and work when CSS alone isn't enough. See the spec and compatibility notes for overflow-wrap and the <wbr> element for details: overflow-wrap and wbr.

A final note: avoid word-break: break-all unless you accept arbitrary breaks; prefer overflow-wrap: break-word plus targeted <wbr>/&shy; insertions for the cleanest, cross-browser result. marked this solved, but the above options let the thread remain useful for future readers.

Recommended Answers

All 2 Replies

Member Avatar for Venom Rush

Could one of the moderators please delete this thread, I made an error in the heading and couldn't find any way of editing it so I created a new one

Member Avatar for peter_budo

Not possible as original post has a reply. Next time just click "Flag bad post" and type short message.
I will mark the post as solved now.

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.