如何让段落元素中的文本停止溢出容器？

Question

我试图使<p>标记中的文本包装在其容器中，但由于某种原因它似乎不起作用。 它溢出了它的容器，我不知道为什么。

本质上，运动 div 包含两个 div，标题和信息，每个子 div 占据了运动 div 空间的 50%。 标题 div 中的段落应该具有包含在段落容器中的居中文本。

 .title { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; }.title p { font-size: 70px; position: relative; margin: 30px auto; width: 60%; height: 60%; display: flex; justify-content: center; align-items: center; }.title span { background: linear-gradient(0deg, rgba(255, 230, 0, 0) 0%, rgba(255, 230, 0, 0) 16%, rgb(255, 230, 0) 16%, rgb(251, 255, 0) 41%, rgba(255, 238, 0, 0) 41%); padding: 0 0.5em 0 0.1em; box-decoration-break: clone; flex-wrap: wrap; }

 <div class="sports section"> <div class="title"> <h1>SPORTS</h1> <p class="sport heading"><span>random piece of text that doesn't wrap</span></p> </div> <div class="info"> <div class="img-cont"> <img src=""> </div> <p></p> </div>

Answer 1

好吧，我找到了一种解决方法（不一定是hacky，但我不知道为什么这是解决方案），我所要做的就是添加“空白：正常”并且它开始包裹在容器内。 它与我使用 span 标签的设计相混淆，所以我把它去掉了，因为它不是必需的，而且总是有点问题。 ：

 .title p { font-size: 70px; position: relative; margin: 30px auto; width: 60%; height: 60%; display: flex; justify-content: center; align-items: center; word-break: break-all; white-space: normal; }

`

所以为了更新这个，我从段落中删除了“display:flex”，只是使用了一个普通的文本对齐来居中，现在 span 元素可以工作了，我不知道为什么它突然工作了，因为我已经尝试了几个次，但确实如此。

 .title p { font-size: 70px; position: relative; margin: 30px auto; width: 60%; height: 60%; text-align: left; }

Answer 2

div class="sports section" => text-align: center;

div class="title" => 边距：自动；

 .sports.section { text-align: center; }.title { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; margin: auto; }.title p { font-size: 70px; position: relative; margin: 30px auto; width: 60%; height: 60%; display: flex; justify-content: center; align-items: center; }.title span { background: linear-gradient(0deg, rgba(255, 230, 0, 0) 0%, rgba(255, 230, 0, 0) 16%, rgb(255, 230, 0) 16%, rgb(251, 255, 0) 41%, rgba(255, 238, 0, 0) 41%); padding: 0 0.5em 0 0.1em; box-decoration-break: clone; flex-wrap: wrap; }

 <div class="sports section"> <div class="title"> <h1>SPORTS</h1> <p class="sport heading"><span>random piece of text that doesn't wrap</span></p> </div> <div class="info"> <div class="img-cont"> <img src=""> </div> <p></p> </div>