使用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

只需修复.column p样式，即将父p的宽度设置为460px。将其更改为100%。

style.css文件中有一个样式，用于设置p（文件http://ghureasi.com/assets/front_assets/css/style.css）中所有.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 2

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

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

或

将宽度auto添加到.column1 p类。

例如，

.column1 p{width:auto;}

希望这有帮助。

Answer 3

尝试更改此行

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

到

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