Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

Question

Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

How can I prevent a paragraph in one of two adjacent div containers from having a line break without changing the container's size? The surrounding div uses display: flex to position its children side by side. Currently, I've applied the following CSS styles to the paragraph:

   white-space: nowrap;
   overflow: hidden;
   width: 300px;

This solution works, but I want the paragraph to adapt to the normal size of the container and not exceed it. If it does, I'd like the container to maintain its original size while cutting off any excess text within the paragraph.

html css

Answer 1

Answer №1

If you're unsure about what you want to accomplish, have you experimented with utilizing the CSS property text-overflow: ellipsis;? Let me guide you through the implementation:

.mother_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mother_div>div {
  flex-basis: 50%;
}

.text-holding_div {
  background-color: red;
  white-space: nowrap;
  overflow: hidden;
}

.text-holding_div p {
  text-overflow: ellipsis;
  overflow: hidden;
}

.second_child {
  background-color: green;
}

<div class="mother_div">
  <div class="text-holding_div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex vel bibendum egestas, tellus dui fringilla tellus, eget imperdiet odio quam at nisi. Phasellus ultrices non diam quis consequat. Vivamus eget sapien eget nunc consequat fermentum
      vitae nec neque. Nam magna lorem, convallis id euismod sit amet, egestas sed tortor. </p>
  </div>
  <div class="second_child"></div>
</div>

This approach eliminates the need to manually set a fixed width for the paragraph tag, and it also gives a cleaner appearance to the cut-off text.

Answer 2

If you're unsure about what you want to accomplish, have you experimented with utilizing the CSS property text-overflow: ellipsis;? Let me guide you through the implementation:

.mother_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mother_div>div {
  flex-basis: 50%;
}

.text-holding_div {
  background-color: red;
  white-space: nowrap;
  overflow: hidden;
}

.text-holding_div p {
  text-overflow: ellipsis;
  overflow: hidden;
}

.second_child {
  background-color: green;
}

<div class="mother_div">
  <div class="text-holding_div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex vel bibendum egestas, tellus dui fringilla tellus, eget imperdiet odio quam at nisi. Phasellus ultrices non diam quis consequat. Vivamus eget sapien eget nunc consequat fermentum
      vitae nec neque. Nam magna lorem, convallis id euismod sit amet, egestas sed tortor. </p>
  </div>
  <div class="second_child"></div>
</div>

This approach eliminates the need to manually set a fixed width for the paragraph tag, and it also gives a cleaner appearance to the cut-off text.

Answer 3

Answer №2

If you wish to allow two lines and avoid using white-space: nowrap, consider implementing line-clamp: 2 in this way:

.mother_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mother_div>div {
  flex-basis: 50%;
}

.text-holding_div {
  background-color: red;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.second_child {
  background-color: green;
}

<div class="mother_div">
  <div class="text-holding_div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex vel bibendum egestas, tellus dui fringilla tellus, eget imperdiet odio quam at nisi. Phasellus ultrices non diam quis consequat. Vivamus eget sapien eget nunc consequat fermentum
      vitae nec neque. Nam magna lorem, convallis id euismod sit amet, egestas sed tortor. </p>
  </div>
  <div class="second_child"></div>
</div>

Answer 4

If you wish to allow two lines and avoid using white-space: nowrap, consider implementing line-clamp: 2 in this way:

.mother_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mother_div>div {
  flex-basis: 50%;
}

.text-holding_div {
  background-color: red;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.second_child {
  background-color: green;
}

<div class="mother_div">
  <div class="text-holding_div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt, ex vel bibendum egestas, tellus dui fringilla tellus, eget imperdiet odio quam at nisi. Phasellus ultrices non diam quis consequat. Vivamus eget sapien eget nunc consequat fermentum
      vitae nec neque. Nam magna lorem, convallis id euismod sit amet, egestas sed tortor. </p>
  </div>
  <div class="second_child"></div>
</div>

Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

Answer №1

Answer №2

Similar questions

Please proceed with submitting your choices in the order that you have selected

Add two columns for mobile devices in the Woocommerce platform

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

When the next button is clicked, the button content disappears

Incorporate dc.js into your Cumulocity web application

Slider text in Master not adjusting properly for mobile devices

What is the best way to eliminate the white margin that is showing up on the right side of my website?

Unexpected behavior from HTML5 number input field

Uncovering data treasures on the web with BeautifulSoup: Extracting JSON files from DIV elements made simple

Choose the option to retrieve information from the database

Executing Javascript code from a specified web address

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

Customize the background color of Material UI input components on standard labels

Applying class to target specific screen size in Bootstrap

Safari re-downloads background image when revisiting with jQuery CSS

The icon on my page is not displaying, and the responsive menu is also not appearing

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Go to a distant web page, complete the form, and send it in

The database powered by Postgresql performs flawlessly when it comes to updating data with accurate code execution. However, there seems to be an