https://jsfiddle.net/g0Lf42bq/6/#&togetherjs=khq05DeHEp
Tengo un div que contiene texto + íconos, los íconos son visibles solo cuando paso el mouse sobre este div. Quiero que mientras estoy sobre el div, si el texto es demasiado largo, será elipsis y mostraré todos los íconos.
(el comportamiento deseado es como en la bandeja de entrada de GMAIL cuando se pasa el cursor sobre un mensaje, se muestran los íconos y el texto es puntos suspensivos)
actualmente, el texto no tiene puntos suspensivos y no veo todos los íconos
.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>Simplemente agregue overflow: hidden al .selected-field
.selected-field{ overflow: hidden; }Ejemplo de trabajo:
.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>