Question

我在div中显示p的内容时遇到问题。如果我的p太长，我希望将其分解为新的一行。但是现在，它只是继续拉伸。如何修复它以显示为div中的块？谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的p元素内容为asdasdasdasdddddddddasdddddddddddddddddddd，其中不包含任何允许的换行符。您需要定义它可能被破坏的位置和方式，然后插入，例如零宽度空格或软连字符。如果您需要有关此方面的帮助，则应在p元素中发布真实内容的说明，并使用真实示例进行说明，并根据它可以被打破。

Answer 2

向css类添加内容

p {word-wrap：break-word;宽度：100像素; }

我认为如果不在css中设置宽度，自动换行就无法正常工作。

将单词换行到新行

2 个答案: