Angular 如何自动换行文字

Question

在我的代码中，我实现了一个带有事件的日历。有些日子的事件很长，除非我点击那个事件，否则我看不到全文。我尝试应用 Word Wrap，但它没有改变任何东西。我应该怎么做才能看到完整的活动？

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>

Answer 1

当您使用自定义组件时，如果没有演示，很难查明问题所在，但我的猜测是文本的容器需要有 white-space: normal，因为您似乎已经有 overflow: hidden 设置

Angular 如何自动换行文字

Angular How Can I word wrap a text

html

css

word-wrap

typescript

angular