html - 将单词换行

Question

我无法在 div 中显示 p 的内容。如果我的 p 太长，我希望将其分解为新的一行。但是现在，它只是不断地拉伸(stretch)。我怎样才能修复它以显示为 div 中的 block ？谢谢。

.box {
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  background: #fff;
}
.boxInner {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  overflow: hidden;
}
.boxInner img {
  width: 100%;
}

.boxInner .titleBox {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    color: #FFF;
    padding: 10px;
    text-align: center;
    height: 42%;
    position: absolute;
    display: block;
}


.titleBox1 {
    top: 0;
    left: 0;
    right: 0;
}
.titleBox2 {
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="box">
      <div class="boxInner">
        <div class="titleBox titleBox1" >

          <p>
            asdasdasdasdddddddddasdddddddddddddddddddd
          </p>
        </div>
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
        <div class="titleBox titleBox2">An old greenhouse</div>
      </div>
    </div>>

Answer 1

您的 p 元素内容是 asdasdasdasdddddddddasdddddddddddddddddddddd，其中不包含任何允许的换行点。您需要定义它可能被破坏的位置和方式，然后插入例如零宽度空格或软连字符。如果您需要这方面的帮助，您应该在 p 元素中发布对您的真实内容的描述，并用真实示例进行说明，并指定它可以被破坏的原则。