why does CSS rule
a {
word-wrap: break-word;
}
with
<div>
<a href="...">verylongurlherewithnospaces</a>
</div>
not wrapping and causing window to show scrollbar, whereas
div {
word-wrap: break-word;
}
will do the wrapping at its anchor child's text fine?
UPDATE: just noticed (see L3ST-instance URL field at this form when you resize the window) that I needed word-break:break-all instead of word-wrap:break-word, apart from the suggested display:inline-block, so now using:
a
{
word-break: break-all !important; /* make sure containers don't override */
display: inline-block !important;
}
which works fine
The CSS word-wrap: break-word;
works only in display:block;
or display:inline-block;
elements so you can just use:
a {
display:inline-block;
word-wrap: break-word;
}
a { width:100px; word-wrap: break-word; display:inline-block; }
<div> <a href="...">verylongurlherewithnospaces</a> </div>
PS div
are display:block;
as default by user-agent.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.