将文本换行到表格单元格内的新行

Question

我有一个可怕的CSS错误，使文本内容出现在表格单元格之外。我已经创建了fiddle问题。

我希望内容在表格单元格中以换行符或类似内容出现，但无论我尝试什么，都无法实现。我尝试更改表格单元格的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;
}

Updated fiddle

Answer 3

从td中移除white-space: nowrap属性，即类.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;
}