CODEWITHSUNDEEP
htmlcss
Julio Anjo
Julio Anjo

Reputation: 1

Overflow: Hid Overflow: hidden is not working or the text is not respecting the max-height of the div?

I am making an alert configuration in the streamlabs OBS for the twitch, it is a bit alert in which the person can send a message that appears. However, when I used a max-height, ellipsis, and an overflow: hidden to control the size of the message that will appear in the text box and it doesn't overflow the created layout, however the text-overflow is not working, testing on some old bits that have a lot of text, they are limited to the text balloon, but burst at the bottom being cut off. Does anyone know why overflow: hidden is not working? And I didn't want to use a white-space: nowrap, because it would be just one line of text. Does anyone know how I would solve this?

This is how it looks in some who apparently don't even respect the padding in the ballon: This is how it looks in some who apparently don't even respect the padding in the ballon

This is the correct way to stay, even if the message is large, but in the first image it is not: This is the correct way to stay, even if the message is large, but in the first image it is not

This is the code that streamlabs obs uses and what I modified in the css to have the balloon.

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->

    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>

  </div>

</div>

CSS

#alert-user-message{
  min-width: 48px;
  min-height: 32px;
  max-width: 605px;
  max-height: 158px;
  margin-top: -195px;
  padding: 16px;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
}

#alert-user-message:before{
  content:"\A";
  left: calc(50% - 2rem);
  border-style: solid;
  border-width: 0 2rem 2rem 2rem;
  border-color: transparent transparent #fff transparent;
  position: fixed !important;
  margin-top: -35px;
}

If someone can get me out of this doubt, why these alerts occur, I would be very grateful. Thank you

Upvotes: 0

Views: 904

Answers (1)

Cem PEHLIVAN
Cem PEHLIVAN

Reputation: 139

function toggleClass() {
    var element = document.getElementById("box");
    element.classList.toggle("full");
}
 #box {
    height: 65px;
    width: 300px;
    border: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
#box.full{
    height: unset;
    display: block;
}
<div id="box">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita temporibus quam ex repudiandae, beatae
    doloremque harum, nesciunt nihil debitis a sit minus in, nulla necessitatibus veniam numquam. Voluptatibus,
    saepe impedit.
</div>
<button type="button" onclick="toggleClass()">Toggle</button>

Upvotes: 0

Related Questions