Question

我正在创建我的freecodecamp个人投资组合项目，并找到了一个我无法解决的问题。我使用网格系统，<p>标记与<img>标记重叠。 <p>继续在一个独特的行中，并溢出一切。它不像网格系统工作不正常，我不知道。这是代码：

<div class="container-fluid">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-8 col-sm-8">
        <h2 class="text-left">Lucas Navarro</h2>
        <p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="https://scontent.ffor2-1.fna.fbcdn.net/v/t1.0-9/1239616_823750807639024_3113666417692842617_n.jpg?oh=c3639eb24282a6493c652c9e44e065dc&oe=5A108s445" class="img-responsive myPic" alt="pic">
      </div>
    </div>
  </div>
</div>

Answer 1

只需使用：

p {
  overflow-wrap: break-word;
}

示例小提琴：

＆＃13;

p {
  overflow-wrap: break-word;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-8 col-sm-8">
        <h2 class="text-left">Lucas Navarro</h2>
        <p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="https://scontent.ffor2-1.fna.fbcdn.net/v/t1.0-9/1239616_823750807639024_3113666417692842617_n.jpg?oh=c3639eb24282a6493c652c9e44e065dc&oe=5A108s445" class="img-responsive myPic" alt="pic">
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在页面的head部分中使用以下代码段作为样式。这会将您的文本包装在其父div中。

.textwrapper {  
   white-space: pre-wrap;      /* for Webkit */    
   white-space: -moz-pre-wrap; /* for Firefox */     
   white-space: -pre-wrap;     /* for Opera versions less than v7 */    
   white-space: -o-pre-wrap;   /* for Opera v7 */     
   word-wrap: break-word;      /* for IE */ 
}

然后，将textwrapper课程分配到您的p代码：

<p class="textwrapper">blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p>

p标签与网格系统重叠

2 个答案: