当div停留在同一个地方时，如何在div中包装文本？

问题描述 投票：1回答：5

我制作了一个简单版本的代码：

.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，所以我不想使用固定宽度。是否只能增加宽度？

html css text textwrapping
5个回答
0
投票

Option 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在旧版浏览器中不受支持。

Option 2

另一种方法是使用表而不是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>

这种方法的优点是：它得到广泛支持。下行：这是一张桌子。 。 。

0
投票

设置.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

0
投票

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>
0
投票

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

enter code here

FIDDLE

0
投票

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

.second {
float: left;
color: #0000FF;
font-weight: bold;
padding: 0 20px;
width:250px;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.