Troubleshooting problem with overflowing content or text within a div using CSS

Question

Troubleshooting problem with overflowing content or text within a div using CSS

My code block looks like this:

<?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
}

The line

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

contains dynamic text from a database, added through ckeditor.

Now, take a look at this image:

As you can see, the text overflows the div. Setting the div's overflow: hidden will hide the text next to "contact us."

I want the text to break after "contact us" and continue from "We are just a phone call away."

I know this issue can be fixed with a simple attribute, but I'm unsure of what that is.

css

Answer 1

Answer №1

To resolve the issue, adjust the style for .column p by changing the width of the parent p from 460px to 100%.

In your style.css file, there is a rule that sets the width for all p elements in .column1 (file ):

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

The current setting of width:460% allows the content to exceed the dimensions of its parent element.

To correct this, update the code to:

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

Answer 2

To resolve the issue, adjust the style for .column p by changing the width of the parent p from 460px to 100%.

In your style.css file, there is a rule that sets the width for all p elements in .column1 (file ):

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

The current setting of width:460% allows the content to exceed the dimensions of its parent element.

To correct this, update the code to:

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

Answer 3

Answer №2

Implement the following CSS code to effectively resolve your problem.

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

Alternatively

Try setting the width to auto for the .column1 p class.

For example,

.column1 p{width:auto;}

I hope this solution proves helpful in addressing your issue.

Answer 4

Implement the following CSS code to effectively resolve your problem.

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

Alternatively

Try setting the width to auto for the .column1 p class.

For example,

.column1 p{width:auto;}

I hope this solution proves helpful in addressing your issue.

Answer 5

Answer №3

Consider making a modification to this specific line

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

and replace it with

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

Answer 6

Consider making a modification to this specific line

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

and replace it with

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

Troubleshooting problem with overflowing content or text within a div using CSS

Answer №1

Answer №2

Answer №3

Similar questions

The empty area at the top of a personalized WordPress theme

Proper Alignment of Div Elements

Ensuring that columns stay at a fixed width without wrapping in Bootstrap 4

The side navigation panel transition is stuck and failing to slide out as intended

series of lines including <ListItemText>

Invoke data-id when the ajax call is successful

Hero Sticky Transition with 100vhDivElement

The absence of stylesheets being loaded is a common occurrence in a modular JavaFX Application that has been published in

What is preventing me from directly taking from Codepen?

Cover the whole page in darkness and emphasize the division element

Make sure all of the inner tags are properly contained within their respective containers

Relative Vs Absolute Positioning: Which One to Choose?

Enforcing Height Constraints on Images in HTML/CSS

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

What is the best way to enclose a div that holds spans with the text that needs to be

Is there a way to utilize JQuery to swap out a CSS background image while preserving the gradient effect?

Add a unique class to the <li> element in Angular 2 when it is clicked

Resetting initial values with Velocity.js post-animation

What is the best way to create transparency within an icon's background without affecting the surrounding box?

Placing divs in rows and columns at specific breakpoints