html - 如何让一个 div 将文本溢出到另一个 div

Question

我正在使用 react-bootstrap 在 React 中创建一个应用程序。我遇到了一个我找不到解决方案的问题。我想让这个人的名字 (person.name-div) 溢出到图像上。

我尝试使用谷歌搜索，使用 white-space: nowrap、overflow-wrap: normal、word-wrap: normal 找到多个建议> 和 hyphens: manual，但在下面的示例中这些都不起作用。

我制作了以下 CodePen.io ，它在随附的屏幕截图中说明了问题。 CodePen 不是在 react 中，而是在常规 Bootstrap 中，因为我不认为这是一个特定于 react 的问题，而是一个 Bootstrap/html 问题。

.profile-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.profile-item div.profile-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 2em;
}

.profile-item div.profile-info div.info-div {
  display: flex;
  flex-direction: column;
}

.profile-item div.profile-info div.info-div p.person-name {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 2em;
}

.profile-item div.profile-info div.info-div .person-title {
  margin-top: 1em;
  margin-bottom: 1em;
}

.profile-item div.profile-info div.info-div .person-contact {
  margin-top: 0;
  margin-bottom: 0;
}

.profile-item div.profile-info div.image-div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div class='container profile-item'>
  <div class='row'>
    <div class='col-12 col-sm-12'>
      <div class='profile-info'>
        <div class='info-div'>
          <p class='person-name'>Mr. Very Cool Super Cool Mega Cool</p>
          <p class='person-title'>Circus Clown</p>
          <p class='person-contact'>T: +45 12345678</p>
          <p class='person-contact'>E: mrcool@circusclown.com</p>
        </div>
        <div class='image-div'>
          <img class='person-image' src='https://via.placeholder.com/140x191' alt='profile picture' />
        </div>
      </div>
    </div>
    <div class='col-12 col-sm-12'>
      <div className='profile-content'>
        <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum sapien a erat aliquet malesuada. Donec fringilla lacus maximus lobortis convallis. Nam elementum quam non nulla imperdiet gravida at quis metus. Pellentesque sagittis
          tincidunt libero eget interdum. Suspendisse eleifend dui in nisi laoreet convallis. Vestibulum blandit luctus nunc, in vehicula neque condimentum eget. Aenean congue velit vitae tristique dapibus. Aliquam malesuada pretium posuere. Nulla consequat
          consequat ante, in mattis nunc posuere vitae. Maecenas aliquet augue luctus, porta erat in, dignissim libero. Donec laoreet, lectus id rutrum hendrerit, est ex iaculis lacus, sit amet consequat metus nunc ac ligula. Duis sodales auctor eros
          a vestibulum. Cras in risus sed metus fermentum mattis porttitor quis enim. In id pretium lorem. Proin suscipit vitae dui consequat interdum. Proin vitae maximus purus. Phasellus cursus, tellus sit amet luctus fermentum, nisi nisi lacinia dui,
          id blandit nisi nisl et turpis. Sed ultrices luctus libero a porttitor. Mauris convallis, sapien in rutrum sodales, augue lorem tempus dolor, vel mollis est velit in turpis. Donec a justo consectetur, dictum dolor nec, tristique elit. Etiam
          convallis sem id porttitor facilisis.</p>
      </div>
    </div>
  </div>
</div>

我想让 person.name-div 溢出图像。理想情况下，常规名称不会有我尝试测试的长度。只要文本溢出到图像上并以“页面”的宽度换行，换行就不是问题。

Answer 1

希望这就是您要找的。我将 div.image-div 设置为绝对定位，z-index 为 1。然后获取 info-div 并给它一个更高的 z-index。

.profile-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.profile-item div.profile-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 2em;
  margin-bottom: 2em;
}

.profile-item div.profile-info div.info-div {
  display: flex;
  flex-direction: column;
  z-index: 5;
  position: relative;
}

.profile-item div.profile-info div.info-div p.person-name {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 2em;
}

.profile-item div.profile-info div.info-div .person-title {
  margin-top: 1em;
  margin-bottom: 1em;
}

.profile-item div.profile-info div.info-div .person-contact {
  margin-top: 0;
  margin-bottom: 0;
}

.profile-item div.profile-info div.image-div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  right: 15px;
  z-index: 1;
}

<div class='container profile-item'>
  <div class='row'>
    <div class='col-12 col-sm-12'>
      <div class='profile-info'>
        <div class='info-div'>
          <p class='person-name'>Mr. Very Cool Super Cool Mega Cool</p>
          <p class='person-title'>Circus Clown</p>
          <p class='person-contact'>T: +45 12345678</p>
          <p class='person-contact'>E: mrcool@circusclown.com</p>
        </div>
        <div class='image-div'>
          <img class='person-image' src='https://via.placeholder.com/140x191' alt='profile picture' />
        </div>
      </div>
    </div>
    <div class='col-12 col-sm-12'>
      <div className='profile-content'>
        <p className='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum sapien a erat aliquet malesuada. Donec fringilla lacus maximus lobortis convallis. Nam elementum quam non nulla imperdiet gravida at quis metus. Pellentesque sagittis
          tincidunt libero eget interdum. Suspendisse eleifend dui in nisi laoreet convallis. Vestibulum blandit luctus nunc, in vehicula neque condimentum eget. Aenean congue velit vitae tristique dapibus. Aliquam malesuada pretium posuere. Nulla consequat
          consequat ante, in mattis nunc posuere vitae. Maecenas aliquet augue luctus, porta erat in, dignissim libero. Donec laoreet, lectus id rutrum hendrerit, est ex iaculis lacus, sit amet consequat metus nunc ac ligula. Duis sodales auctor eros
          a vestibulum. Cras in risus sed metus fermentum mattis porttitor quis enim. In id pretium lorem. Proin suscipit vitae dui consequat interdum. Proin vitae maximus purus. Phasellus cursus, tellus sit amet luctus fermentum, nisi nisi lacinia dui,
          id blandit nisi nisl et turpis. Sed ultrices luctus libero a porttitor. Mauris convallis, sapien in rutrum sodales, augue lorem tempus dolor, vel mollis est velit in turpis. Donec a justo consectetur, dictum dolor nec, tristique elit. Etiam
          convallis sem id porttitor facilisis.</p>
      </div>
    </div>
  </div>
</div>