锚标记文本不会换

Question

有一个简单的问题。我有锚标签，它是指向外部网站的链接，位于12列网格内的p元素下面。我在它们上面使用了col-4，文本停留在容器内，但是锚文本没有打破另一条线。 p元素及其文本保持为col-4，但锚文本溢出。请帮忙

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

Answer 1

我认为a{white-space: pre-wrap}应该做的伎俩

这是指向similar issue

的链接

Answer 2

elif为我工作，多亏this link

Answer 3

尝试在标记中添加“显示：内容”样式。

内联：

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

外部：

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

css文件：

.align-link{
  display: contents;
}