锚点文本不换行

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

- Patrick McDermott

Answer 1

我认为a{white-space: pre-wrap}可以解决问题

这里有一个链接类似问题

- TheHuman Wall

---

谢谢回复。我尝试了那个方法，但它只是截断了文本。我选择了简单的方法，使用了一个按钮。无论如何还是谢谢！ - Patrick McDermott

Answer 2

尝试在标签中添加"display: contents"样式。

内联：

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

- V-Nayak Yuvraj Bhatt

Answer 3

a { word-wrap: break-word; } 对我很有帮助，感谢这个链接

- Trevor Daniels