Search code examples
htmlcssangulartypescriptword-wrap

Angular How Can I word wrap a text

In my code, I have implemented a calendar with events. The events of some days are long and I can't see the full text unless I click on that event. I tried to apply Word Wrap but it didn't change anything. What should I do to see the full event?

HTML:

<div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
    <div [ngSwitch]="view">
        <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" style="word-wrap: break-word"
            (viewDateChange)="selectedDay = {date:$event}" [events]="events" [refresh]="refresh"
            (dayClicked)="dayClicked($event.day)" hourSegments="2" dayStartHour="8" snapDraggedEvents="false"
            (eventClicked)="editEvent('edit', $event.event)" dayEndHour="18">
        </mwl-calendar-week-view>
    </div>
</div>

enter image description here

Solution

  • It's very hard to pinpoint the problem without a demo when you're using a custom component, but my guess is that the container of the text needs to have white-space: normal since you already seem to have overflow: hidden set