Word wrap a link so it doesn’t overflow its parent div width [duplicate]
The link text can be very long and it overflows the div when it’s length does exceed the div width. Is there a way to force the link to break and go on the next line when its width exceeds the div width?
7 Answers 7
The following is a cross browser compatible solution:
Yes you need them for cross browser compatibility. I updated my answer and included a working example on jsfiddle.
thanks Hussein for your help. I’ve noticed that in your example there are spaces, here is a fork without spaces jsfiddle.net/wxBxQ unfortunately I have currently access only to browsers supporting word-wrap, so I would have to check with browser not supporting word-wrap
I want to check that it is working with browsers not supporting word-wrap:break-word as I want to make sure the white-space property correctly limit the width for my links that don’t contain white spaces. For that I’ll try with older browsers, but for now I don’t have access to them.
Its also worth noting that word-wrap has been withdrawn from the CSS3 spec: impressivewebs.com/new-css3-text-wrap
If you’re okay with CSS3, there’s a property for that:
Works for Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
wrap link inside another div with smaller width
div#permalink_section here goes a very very long link does not work, for example http://example.com/index?param=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa overflows
or use javascript to truncate the length of the link’s text, replacing the end with «. «
Working example of the JS method: http://jsfiddle.net/fhCYX/3/
thanks, word-wrap:break-word works fine, can’t use the other solutions you proposed because I need to display the whole link
I didn’t have much luck with the solution in the accepted answer, so I tried a different approach. On load, I pad all slashes in the anchor text with spaces: «/» —> » / «. Most links don’t have slashes and so this does nothing, and most links that do have them are hyperlinks, and these look okay with this substitution, and then the links do wrap correctly.
overflow:hidden seems to be the key to making an element of size:auto break-word correctly
That example includes a left float as I was trying to achieve a media-object like layout.
Unfortunately if you try to use table-cell elements it breaks again 🙁
How can I get the width of a link be only the width of the text’s width?
I managed to get pretty far into coding a function where the link’s info will fade-in upon hovering over the link’s title, but whenever I hover my mouse over the remaining space of the title’s text, it triggers the link’s info to fade-in. Is there a way I can get the activation-width only the with of the link’s title? I am also looking for a CSS-only solution. If you can think of a more efficient method of achieving this, please let me know 🙂 Fiddle here. And here’s a visualization of the problem since I’m not too familiar with code / developing terminology: Many thanks in advance! HTML:
Title (More) Title Description over here 
html, body < margin: 0; padding: 0; width:100%; height:100%; >body < font-family: helvetica; font-size: 18px; line-height: 26px; >div.page < width:80%; max-width:960px; margin:0 auto; height:100%; >div.text < width:80%; max-width:960px; margin:0 auto; >div.text span.title < -webkit-transition: all .5s; transition: all .5s; >div.text:hover span.title < opacity: 0; visibility: hidden; >div.text span.info < position: absolute; top: 0; right: 0; left: 0; opacity: 0; visibility: hidden; -webkit-transition: all .5s; transition: all .5s; >div.text:hover span.info < opacity: 1; visibility: visible; >.image img < width: 100%; height: auto; padding-top: 10px; >.text < position: absolute; z-index: 9999; >.image
Setting a width and height on an A tag
Is it possible to set the width and height in pixels on an anchor tag? I’d like to have the anchor tag to have a background image while retaining the text inside the anchor.
6 Answers 6
You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.
+1, this works but can you please tell me the reason why display: block or display: inline-block; is making width and height work in this case?
li is an inline tag and you cannot give width height properties to inline tags. Width height are not applicable on them it is as simple as that. When you give it display inline-block it starts to act as both inline and block and accepts block properties too.
You can also use display: inline-block . The advantage of this is that it will set the height and width like a block element but also set it inline so that you can have another a tag sitting right next to it, permitting the parent space.
You can find out more about display properties here
I was looking for a solution to set the width of the anchor tag as its text content and not in a certain width and height, so setting it to «inline-block» did the trick exactly. Thanks.
All these suggestions work unless you put the anchors inside an UL list.
Then any cascade style sheet rules are overridden in the Chrome browser. The width becomes auto. Then you must use inline CSS rules directly on the anchor itself.
It’s not an exact duplicate (so far as I can find), but this is a common problem.
display:block is what you need. but you should read the spec to understand why.
Setting display: block on the anchor element is a solid suggestion, but I can think of another scenario that doesn’t require explicitly setting it.
Supposethe anchor is nested inside a div element with display: flex property. Then all the direct children of this div aka flex items become block elements and you can set height to the anchor.
If the background image’s height is not capped, however, it will cause overflow. So apply height: 100% to the it.
Below is an example. Please note that the background image in the example is SVG, but SVG is inline by default, so you can replace it with an element and get the same result.
So all in all, this is a roundabout way of setting display: block to anchor element, but I feel like pointing it out because the layout above is very common in header logos.