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

How to use CSS and Jquery to show a child element right after its parent element

I'm having trouble obtaining accurate results for $....<...$ within the <li> tags using MathJax

Creating a responsive single webpage using HTML/CSS

Arranging Bootstrap dropdown and buttons on a single line

`` I am experiencing a problem with CSS display block in Internet Explorer

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

Steps for including an animation class in a div

The submit function for Ajax is not functioning properly

Book of Tales displaying Emotion Styling upon initial load only

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

"Identifying elements in CSS that do not have any adjacent text elements

Attempting to arrange a line consisting of four individual cells

Identifying 404 image status in AngularJS triggering by a button press

What is the best way for me to collect messages submitted through a form on my website?

Troubleshooting: Image Not Displaying in Twitter Bootstrap Theme

Ways to transition to an iframe window

Selecting objects within a small three.js view

Ways to expand flexbox to occupy the entire container

What is the best way to preserve the updated sequence of a list that can be re-ordered?

Maintain original image file name when downloading