如何将文本包装在 div 中，而 div 保持在同一个位置？

Question

我做了一个简单的代码：

.box {
  border: 1px solid black;
}

.first {
  float: left;
  color: #0000FF;
  font-weight: bold;
  padding: 0 20px;
}

.second {
  float: left;
  color: #0000FF;
  font-weight: bold;
  padding: 0 20px;
}

.clear {
  clear: both;
}

<html>

<body>

  <div class="box first">Username</div>
  <div class="box second">This is a short message</div>
  <div class="clear"></div>

  <div class="box first">Username</div>
  <div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <div class="clear"></div>

  <div class="box first">Username</div>
  <div class="box second">Message</div>
  <div class="clear"></div>

</body>

</html>

如您所见，divs 的第二组包含大量文本。

我希望第二个 div 固定在第一个 div 旁边，第二个 div 中的文本应该换行。（就像它已经做的那样）

我使用bootstrap，所以我不想使用固定宽度。只能加宽度吗？

Answer 1

您需要为两个 div 设置宽度才能实现..

enter code here

FIDDLE

Answer 2

设置 .first 和 .second 的宽度

<div class="box first">Username</div>
<div class="box second">This is a short message</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">Message</div>
<div class="clear"></div>
<style>
.box {
    border: 1px solid black;
}
.first {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:20%;
}
.second {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
    width:60%;
}
.clear{
    clear: both;
}
</style>

here is fiddle

Answer 3

div 上需要宽度，否则会占用 100% 的可用区域！

<html>
<body>
<style>
.box {
    border: 1px solid black;
}
.first {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
}
.second {
    float: left;
    color: #0000FF;
    font-weight: bold;
    padding: 0 20px;
  
  /* ADD A WIDTH */
    width: 250px;
}
.clear{
    clear: both;
}
</style>

<div class="box first">Username</div>
<div class="box second">This is a short message</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="clear"></div>

<div class="box first">Username</div>
<div class="box second">Message</div>
<div class="clear"></div>

</body>
</html>

Answer 4

我刚刚更新了 css class，你能试试这个吗？

.second {
float: left;
color: #0000FF;
font-weight: bold;
padding: 0 20px;
width:250px;
}

Answer 5

选项 1

如果不设置宽度，则无法在当前结构中完成此操作。但是，您可以通过仅设置 1 个宽度来做到这一点。

如果你给 .first 一个设置的宽度，绝对位置，并设置 .second 的填充以适应 .first-div，你可能会解决这个问题，同时保持 .second 流畅。

    .box {
     border: 1px solid black;
    }
    .row {
        position: relative;
    }
    .first {
     position: absolute;
        left: 0;
        top: 0;
     color: #0000FF;
     font-weight: bold;
     padding: 0 20px;
        width: 80px;
    }
    .second {
     box-sizing: border-box;
        width: 100%;
     color: #0000FF;
     font-weight: bold;
     padding: 0 20px 0 140px;
    }
    .clear{
     clear: both;
    }

    <html>
    <body>

    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">This is a short message</div>
    <div class="clear"></div>
    </div>
    
    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
    <div class="clear"></div>
    </div>
    
    <div class="row">
    <div class="box first">Username</div>
    <div class="box second">Message</div>
    <div class="clear"></div>
    </div>
    
    </body>
    </html>

此方法的缺点是 .first 仍然是固定宽度，这在旧浏览器中不起作用，因为 box-sizing 在旧浏览器中不受支持。

选项 2

另一种方法是使用 table 而不是 div。这将为您提供以下代码：

    .box {
     border: 1px solid black;
    }
    .first {
     color: #0000FF;
     font-weight: bold;
     padding: 0 20px;
    }
    .second {
     color: #0000FF;
     font-weight: bold;
     padding: 0 20px;
    }

    <html>
    <body>
    
    <table>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">This is a short message</td>
    </tr>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</td>
    </tr>
    <tr>
    <td class="box first">Username</td>
    <td class="box second">Message</td>
    </tr>
    </table>
    
    </body>
    </html>

此方法的优点是：它得到广泛支持。缺点：这是一个 table 。 . .

如何将文本包装在 div 中，而 div 保持在同一个位置？

How to wrap text inside a div while div stays in the same place?

html

css

text

word-wrap

选项 1

选项 2