自动换行：断词中断到错误的 div 大小

Posted 2023-05-08

【中文标题】自动换行：断词中断到错误的 div 大小

【英文标题】：Word-wrap: break-word breaks to wrong div size

【发布时间】：2013-12-04 01:51:08

【问题描述】：

我正在尝试对齐图像旁边的文本。我想考虑没有空格的长字符串。

我的css如下

.new_item 
width: 100%; 
float: left;
border-bottom: 1px solid #990000; 
margin: 0 auto;


.image_container 
padding: 2px 2px;
height: auto;
float: left;
width: 300px;


.itemdescription 
word-wrap: break-word;
display: inline;

包含单个长字符串的文本描述仍被强制低于 image_container，因为（我认为）“word-wrap: break-word”将单词分解为容器的宽度。

如何强制描述 div 留在图片 div 旁边？容器 div 的宽度为 60%，图像始终为 300px。如何将 div 的大小调整为 60% 的剩余大小？我尝试使用 inline-block 并将相应的 div 向左和向右浮动。

编辑：还包括上面容器 div 的 CSS。

<div class="item_list">
                    <div class="new_item">
                    <div class="name">
                        <h2>Clock</h2><h4>$132</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img src="images/image001.jpg" class="image"></div>
                        <div class="itemdescription">This       early 1800's winding design uses a leaf-spring click on the spokes of the wheel, to hold the weight that runs the clock. The power of the weight is transferred to the click.

Eventually, the shock of winding caused one of the original clicks to fail at a weak    point. Following the original maker's concept, a stronger replacement was made and installed.

The completed repair, ready to install - and good for another century of use. $132 </div>
                    </div>  
                    </div>
<div class="new_item">
                    <div class="name">
                        <h2>Litte</h2><h4>$832.2</h4>
                    </div>
                    <div class="item_info"> 
                        <div class="image_container"><img      src="images/HDR1.jpg" class="image"></div>
                        <div         class="itemdescription">LittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebi   rdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebirdLittlebird $832.2 </div>
                    </div>  
                    </div>      </div>

【问题讨论】：

为了快速响应，请显示您的 html 代码。如果可能，请创建小提琴。

我已经编辑了我的原始帖子以包含 HTML。谢谢！

@jason 请提供在浏览器中呈现的 HTML，而不是 php 输出

再次编辑。谢谢！

【参考方案1】：

您使您的image_container 浮动，但您的itemdescription 不是；这意味着itemdescription 将遵循“正常”页面流，因此当左侧空间空闲时，它将使用它。 为了实现您想要的（我认为），您应该将每个块浮动并分配它们的大小，例如：

.image_container 
    padding: 2px 2px;
    height: auto;
    float: left;
    width: 300px;


.itemdescription 
    display: block;
    float: left;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;

别忘了给父母的 div 设置一个大小，让它更好地工作；阅读一下CSS floats theory

【讨论】：

大家好，谢谢大家的回复。如果页面为全分辨率，Jeremy 的解决方案有效，但是如果我将浏览器窗口缩小，描述中的文本会跳到图像下方。有解决办法吗？

通过您关于设置固定尺寸的提示来解决这个问题。只需设置 .itemdescription 的高度并设置溢出：auto;

【参考方案2】：

将 .itemdescription 设置为 position:absolute 和 left:320; （假设您希望图像和文本之间有一些空间）解决了这个问题：

.itemdescription 
    word-wrap: break-word;
    display: inline;
    float:left;
    position:absolute;
    left:320px;