How to use css to make div with few sections overflow?

user_3542254 0
Viewed 163

https://jsfiddle.net/g0Lf42bq/6/#&togetherjs=khq05DeHEp

I have a div that contains text + icons the icons are visible only when hovering on this div I want that while I'm hovering on the div if the text is too long then it will be ellipsis and I will show all the icons

(the desired behavior is like in GMAIL inbox when hovering on a message than the icons are displayed and the text is ellipsis)

currently, the text is not ellipsis and I don't see all the icons

.selected-field-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-section {
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CCCED3;
  box-sizing: border-box;
  border-radius: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #37383A;
  padding: 6px;
  margin-top: 10px;
  width: 195px;
  max-width: 195px;
}

.remove-field {
  display: none;
}

.field-section:hover .remove-field {
      display: flex;    
}
<div class="field-section">
  <div class="selected-field items-center">
    <div class="selected-field-name">{{selectedField.name}}</div>
  </div>
  <div class="d-flex">
    <icon-button class="remove-field" Icon="plus" width="16px" height="16px" (click)="removeField(selectedField)"></icon-button>
    <icon-button class="remove-field" Icon="x-close" width="16px" height="16px" (click)="removeField(selectedField)"></icon-button>
  </div>
</div>

css html
1 Answers

Just add overflow: hidden to the .selected-field

.selected-field{
   overflow: hidden;
}

Working example:

.selected-field-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-section {
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CCCED3;
  box-sizing: border-box;
  border-radius: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #37383A;
  padding: 6px;
  margin-top: 10px;
  width: 195px;
  max-width: 195px;
}

.remove-field {
  display: none;
  background: red;
  color: white;
 }

.field-section:hover .remove-field {
   display: flex;    
}

.selected-field{
   overflow: hidden;
}

.icon-wrap{
  display: flex;
  white-space: nowrap;
  gap: 10px
}
<div class="field-section">
  <div class="selected-field items-center">
    <div class="selected-field-name">hello how are you today?</div>
  </div>
  <div class="d-flex icon-wrap">
    <div class="remove-field" Icon="plus" width="16px" height="16px" (click)="removeField(selectedField)">Plus icon</div>
    <div class="remove-field" Icon="x-close" width="16px" height="16px" (click)="removeField(selectedField)">Close icon</div>
  </div>
</div>

user_94813870
Related