Question 236175 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make a text be truncated when it exceeds the size of a div container?

I have two div containers that are placed next to each other. Both have the same size. Now I have a paragraph in the left container and I don´t want the paragraph to have a line break. Also, the container shouldn´t change its size.

Around these two div containers is another one with display: flex, so that its two children are placed next to each other. For the paragraph, I have the following CSS styles.

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

It works for me like this, but I don´t want to give the exact size in px for the width. I want that it is the normal size of the div container and that this size can´t be exceeded. If it is, the container should remain the same size and the text of the paragraph should be cut off.

Tags:

3

Answers


  1. 0

    I think what you are looking for is one of these https://www.w3schools.com/cssref/pr_pos_overflow.php
    and can be shown like this

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  .p{
    max-width: 13rem;
    max-height: 13rem;
    overflow: clip;
    background-color: red;
  }
  .b{
    background-color: blue;
    width: 13rem;
    height: 13rem;
  }

</style>
<body>
    <div class="p">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit totam labore deserunt! Quos, cupiditate voluptatibus repellendus architecto officia excepturi mollitia fugit dolor eligendi dolorum, ipsum placeat laboriosam iusto dolores facere! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ratione error nemo molestiae? Quae, quos in incidunt nesciunt officiis rem fugit, reiciendis molestiae iusto commodi architecto dolore! Quam, cupiditate ipsa?</p>
    </div>
    <div class="b">
      <p>regular text</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste eius atque vel, rerum reprehenderit unde minus, temporibus cum cumque autem, dolores ipsam consequatur doloribus fugiat obcaecati! Facilis expedita nostrum doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, necessitatibus voluptatem quam ratione reprehenderit veritatis! Vitae, laboriosam! Praesentium doloribus minima iure! Exercitationem explicabo pariatur ex, ullam facere quo ipsam quaerat.</p>
    </div>
</body>
</html>

    im sorry if i got this wrong but your question is very hard to understand

    Login or Signup to reply.
  2. 0

    you can try using my approach

    <html>
   <head></head>
   <body>
      <div class="flex w-68">
         <div class="overflow-hidden text-ellipsis whitespace-nowrap">Govt. - Research Professional</div>
         <div class=" overflow-hidden text-ellipsis whitespace-nowrap">Rs. 5 - 7.5 Lakh per Annum</div>
      </div>
      <style>
         .flex{display:flex;}
         .w-68{width:272px;}
         .overflow-hidden{overflow:hidden;}
         .text-ellipsis{text-overflow:ellipsis;}
         .whitespace-nowrap{white-space:nowrap;}
      </style>
   </body>
</html>

    I have contained the width to 272px
    The classes overflow-hidden, text-ellipsis, and whitespace-nowrap
    I have used these classes to solve this

    Login or Signup to reply.
  3. 0

    Not sure what exactly you’re trying to do, but have you tried the CSS text-overflow: ellipsis; property?
    Let me show you how you can implement that:
    HTML

    .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 way you don’t have to hard code a fixed width to the paragraph tag, and as a bonus, the text cut off looks neater. Lemme know if it works out or you need any more help (preferably through the comments and not a down-vote 😅)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search