Anchor tag text won't wrap

Question

Having a simple problem. I have anchor tags that are links to external websites, which are underneath a p element, inside a 12 column grid. I have used col-4 on them, the text is staying within the container but the anchors text is not breaking onto another line. The p element and its text keeps to the col-4, but the anchor text overflows. Please help

HTML

<div class="grouped-content__selection">
<div class="col4">
    <h3>Go Kart Sorihuela Costa</h3>    
    <p>Hello <br>Website: <a href="google.co.uk">This line of text goes over</a></p>
</div>
</div>

CSS

.grouped-content__selection {
border-top: 2px solid #184450;
padding: 2rem 1rem 1rem 1rem;
overflow: hidden;
height: 100%;}

score 5 · Answer 1 · edited May 23 '17 at 11:43

5

I think a{white-space: pre-wrap} should do the trick

here is a link to a similar issue

edited May 23 '17 at 11:43

Community

1
1

answered Jul 09 '15 at 18:27

TheHuman Wall

207
1
8

cheers for the response. I tried that but all it did was cut the text off. I have gone for the easy route and used a button instead. Thanks anyways! – Patrick McDermott Jul 10 '15 at 12:14

score 3 · Answer 2 · answered Apr 14 '20 at 05:20

Try adding a "display: contents" style to < a > tag.

inline:

<p>Hello <br>Website: <a href="google.co.uk" style="display: contents">This line of text goes over</a></p>

external:

<p>Hello <br>Website: <a href="google.co.uk" class="align-link">This line of text goes over</a></p>

css file:

.align-link{
  display: contents;
}

score 2 · Answer 3 · answered Mar 11 '20 at 12:22

2

a { word-wrap: break-word; } worked for me, thanks to this link

answered Mar 11 '20 at 12:22

Trevor Daniels

1,119
8
5

Anchor tag text won't wrap

3 Answers3