css - 使用 css 的 div 中的溢出或文本问题

Question

我有一段代码如下：

<?php
if(strpos($page_info[0]['page_title'], 'Service')!==false)
{?>
        <img src="<?php echo base_url();?>assets/front_assets/images/service.png" width="450px" height="400px"/>
        <br/>
        <div style="width:480px; height: auto; border: 1px solid #000; border-radius: 5px; overflow: visible; display: inline-block;">
        <?php
        foreach($service as $srv)
        {?>
        <div style="float:left;width:100px;">
        <img src="<?php echo base_url().$srv['service_image'];?>" width="100px"/>
        </div>
        <div style="float:left;width:300px">
            <strong><?php echo $srv['service_title'];?></strong>
            <br/>
            <strong><?php echo $srv['service_content'];?></strong>
        </div>
            <div style="clear:both;"></div>
        <?php
        }?>
        </div>

        <?php
}

该行<strong><?php echo $srv['service_content'];?></strong> 显示来自数据库的文本，该文本是使用 ckeditor 添加的。

现在让我给你看一张图：

看到文本正在脱离 div。现在，如果我设置了 div，overflow: hidden 那么旁边的文本contact us.就会被隐藏。

我只是不想那样，我希望线路在之后被打破contact us.

下一行显示从"We are just a phone call away."

我知道这可以通过一个简单的属性来解决，但我只是不知道。

Answer 1

尝试更改此行

<strong><?php echo $srv['service_content'];?></strong>

至

<span style="width:250px;">
   <strong><?php echo $srv['service_content'];?></strong>
</span>

Answer 2

只需修复将.column p父级宽度设置为p460px 的样式。将其更改为100%.

您在文件中有一个样式，style.css它为所有文件设置宽度（文件http://ghureasi.com/assets/front_assets/css/style.css）：p.column1

.column1 p{
display:block;
width:460px;
padding:20px 0 25px 3px
}

因为width:460%您允许此内容增长（并使用比父元素更多的空间）。

将其更改为

.column1 p{
display:block;
width:100%;
padding:20px 0 25px 3px
}

Answer 3

将此添加到您的 CSS 中，您的问题将得到解决。

.column1 span {
    display: inline-block;
    width: 94%;
}

或者

auto为类添加宽度.column1 p。

例如，

.column1 p{width:auto;}

希望这可以帮助。