How to stop text from spilling out of its parent container in CSS

I have a description of a website in HTML:

<div class="a_desc">
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean     commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
</div>
<div>
  Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque </div>
</div>

The CSS for the description is:

.a_desc{
position: relative;
margin: 0.4em auto 0 auto;
background: rgba(27,27,25,0.7);
max-width: 500px;
padding:0.4em;
border-radius: 1em;
font-weight: 100;
max-height: 100%:
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
}
.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
}
.a_desc > div:last-child:after{
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

While it works fine on Android phones, it overflows on iPhones as shown in this screenshot: https://i.sstatic.net/4dtsm.jpg

How can I prevent this overflow issue and expand the parent to fit all of the text?

htmlcss

Answer №1

To conceal text that exceeds the container, try this CSS rule:

overflow: hidden;

Answer №2

Since no correct answer was provided, I persisted in my attempts and discovered that the solution lies in setting the parent element to display: table; and the child element to display: table-row;

Answer №3

Managing overflow can be done in the following way:

.content > section{       
overflow: hidden; 
}

To ensure text isn't cropped, consider adding a scroll bar using the following code:

.content > section{
  overflow: auto;
}

Answer №4

If you're looking for a solution, consider setting the following attribute:

overflow-x: auto;

Alternatively, you can try:

overflow-y: visible;

To show the text horizontally.

Answer №5

Here is a solution that should do the trick:

.a_desc > div{
margin-bottom: 0.5em;
line-height: 17px;
display: table;
height: 100%;
}

To improve SEO, I recommend wrapping the text in p tags and setting them to display: block or inline-block for cleaner code.

Answer №6

To ensure your container adjusts its size as the window is resized, try implementing the following CSS code:

width: 100%;
height: auto;

This method has worked effectively for me. Upon resizing the window, the container dynamically adapts to accommodate the text content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically altering the CSS4 variables in real time

I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...

cssangulartypescriptangular7ionic4

Choosing a single row from a Bootstrap React table

i have successfully implemented the Async Function to display data, as shown in the image. the table starts empty but gets populated after the await. However, I am facing an issue in finding a property to retrieve the selected row from the table. Is there ...

javascripthtmlreactjs

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

htmlcss

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...

javascripthtmlcss

Is there a way to show the keyboard on Chrome for Android without displaying the address bar?

One of the key features of Chrome on Android is that the address bar disappears when scrolling, allowing for more screen space. However, when you click on a text input field and the keyboard pops up, the address bar reappears. It seems like Google intenti ...

javascriptandroidcssgoogle-chrome

I am experiencing difficulties updating my website

Is there a way to automatically refresh my webpage in PHP whenever I press the enter key? ...

phphtmlcss

Add a text 20px below the body element

After adding text to the body of my HTML page, I noticed that it appears directly at the top. What I am trying to achieve is to have the text displayed 20px below the page. How can I accomplish this? I attempted to use padding, but it applies padding to a ...

htmlcss

Is there a way to retain the dropdown values when the page is reloaded?

In my ASP.NET project, I have created a website where users can add articles to a table displaying different products. The website contains tables showing warehouse items and materials needed for product manufacturing. Users can select a product from a dr ...

c#htmlasp.net

Responsive Line Breaks in Bootstrap 4

I can't seem to find any information in the documentation to guide me in the right direction here. I'm hesitant to use columns as it could result in gaps between the text. Currently, I have the date displayed at the top of my website like this u ...

htmlcsstwitter-bootstrapbootstrap-4

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Alter the URL and CSS upon clicking an element

Currently, I am faced with a challenge on my website where I have multiple pages that utilize PHP to include content and jQuery to toggle the display of said content by adjusting CSS properties. However, I am encountering difficulty in implementing this ...

javascriptjquerycss

What is the process for generating a variable script within an HTML tag using document.write?

Here is the code snippet: <script>var posterimage=/images/videos/intro/iamge01.png;</script> <script>document.write('<video controls="controls" height="300" id="video-playlist" poster="VARIABLE" preload="none" src="video.mp4" wid ...

javascripthtml

Guide to connecting a different HTML page to a thumbnail image using jQuery

let newColumnBlock = $('<div class="col-md-2">'); let newImagePoster = $('<img>'); let newSelectButton = $('<a href="secondPage.html"><button class="selectButton"></button></a>'); let movie ...

javascriptjqueryhtml

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

When the user clicks, the event is triggered twice but only within the tabs

I am having an issue with my webpage where I have a container named task1 that includes a slideshow, back button, and next button. The final page will feature task1 as one of the tabs in a series of containers called tasks. When I use the onClick event wit ...

phpjqueryhtmlonclick

Exporting a table filled with data from a MySQL database to an Excel spreadsheet

Querying a MySQL database to display data in a table has been successful. Currently, it is set up to show results within a specific date range. Now, the goal is to add a button to the table that allows users to export the data to an Excel file. Previously ...

phphtmlmysqlexport-to-excel

Is there a quicker alternative to html.fromhtml for adding html-styled text to textviews?

Looking for a quicker solution than using Html.fromHtml to set text in multiple TextViews. Open to suggestions of support libraries that may offer a faster method. Spannables have been considered, but they don't allow for line breaks without using Spa ...

androidhtmltextview

Is there a way to integrate a regular contact form with PHP?

Just bought a web template that only came with a contact form consisting of labels. There was no PHP form included, so need help setting it up... Couldn't add the code here, but uploaded an image screenshot of the contact form: contact form ...

phpjqueryhtmlemail

Auto-suggest dropdown menu with pre-populated options

I am looking to implement a feature where users can click on an icon and a dropdown menu will appear, allowing them to search through data. To better illustrate this concept, here is an image: Users will be able to input their quiz names in the first sect ...

javascriptjqueryhtmldrop-down-menujquery-select2