CODEWITHSUNDEEP
htmloverflowanchor
Patrick McDermott
Patrick McDermott

Reputation: 1220

Anchor tag text won't wrap

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%;}

Upvotes: 6

Views: 8911

Answers (3)

V-Nayak Yuvraj Bhatt
V-Nayak Yuvraj Bhatt

Reputation: 41

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;
}

Upvotes: 3

Trevor Daniels
Trevor Daniels

Reputation: 1239

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

Upvotes: 2

TheHuman Wall
TheHuman Wall

Reputation: 207

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

here is a link to a similar issue

Upvotes: 5

Related Questions