时间戳

首页 > 解决方案 > 长文本溢出到 HTML/CSS 中的下一个组件

javascript - 长文本溢出到 HTML/CSS 中的下一个组件

问题描述

有max-width设置时，达到最大宽度时长句会被换成多行。但是，以某种方式，包裹线将与下面的组件重叠。例如，

body {
  font-family: sans-serif;
  font-weight: 300;
  margin: 1em auto;
  max-width: 50em;
}

div.main {
  margin: auto;
  width: 75%;
  height: 75%;
  box-shadow: grey 0px 0px 5px;
}

div.inner {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

p.footer {
  position: relative;
  text-align: right;
  bottom: 0px;
  width: 100%;
  font-size: 8pt;
}

div.right {
  display: block;
  float: right;
}

div.left {
  display: block;
  text-align: left;
  margin-right: 0px;
  max-width: 75%;
  float: left;
}
<div id="main" class="main">
  <div class="inner">
    <div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left </div>
    <div class="right">right</div>
    <br>
    <br>
    <p class="footer"> test content</p>
  </div>
</div>

将生成这一页. 但是，在减小页面宽度后，它会像 一样这个 ，溢出的左侧组件与页脚一起折叠（也许inner）。有没有办法解决这个问题？谢谢！

[有人建议clearfix，但我不知道它是如何工作的]

标签： javascripthtmlcss

解决方案

推荐阅读