將文字換成表格單元格中的新行

Question

我有一個可怕的CSS錯誤，使文本內容顯示在表格單元格之外。 我為這個問題制造了一個小提琴 。

我希望內容以換行符或類似的形式出現在表格單元格中，但是無論我如何嘗試都無法實現。 我嘗試更改表格單元格的width屬性，但是沒有任何可能。 我該怎么辦？

<td class="title-details">
  <a href="/social/group/infosys-scrum-team/event/uppfoljning-av-organisationsforandringen-2/" title="Klicka för att se alla detaljer">



    Uppföljning av organisationsförändringen - Avstämningspunkt på IT-ledningsmötet</a>
  <span class="title-details-short">

                                     <a href="/social/group/infosys-scrum-team/event/uppfoljning-av-organisationsforandringen-2/" title="Uppföljning av organisationsförändringen
    • Den ursprungliga tidplanen hade en uppföljningspunkt
    den 6 maj
    • Den stryks och fokus läggs på förändringsarbetet
    tillsammans med cheferna
    • Planerade uppföljningspunkter
    • 16/9 – Uppstartsaktivitet kopplat till
    organisationsförändringen
    • 25/11 – Avstämningspunkt på IT-ledningsmötet
    • 2/12 – Avstämningspunkt på ITA-mötet 2/12">...</a>

                                </span>
  <span class="title-details-long">Uppföljning av organisationsförändringen
    • Den ursprungliga tidplanen hade en uppföljningspunkt
    den 6 maj
    • Den stryks och fokus läggs på förändringsarbetet
    tillsammans med cheferna
    • Planerade uppföljningspunkter
    • 16/9 – Uppstartsaktivitet kopplat till
    organisationsförändringen
    • 25/11 – Avstämningspunkt på IT-ledningsmötet
    • 2/12 – Avstämningspunkt på ITA-mötet 2/12</span>
</td>

Answer 1

您具有以下樣式：

#events .event_search_table td {
    white-space: nowrap;
}

刪除它，您的文本將自動換行

如果要保留此樣式但不包裝該特定列，請覆蓋該樣式：

#events .event_search_table td.title-details {
    white-space: normal;
}

Answer 2

您是否嘗試過white-space: normal; ？

td.title-details a {
    white-space: normal;
}

更新的小提琴

Answer 3

從td中刪除white-space: nowrap屬性，即class .title-details

#events .event_search_table .title-details {
      white-space: normal;
    }

或者您可以將CSS屬性賦予.title-detail類

#events .event_search_table .title-details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}