将文字换成表格单元格中的新行

Question

I have a terrible CSS bug that makes text content appear outside of the table cell. I have created a fiddle with the problem.

I would like the content to appear with a linebreak or similar inside the table cell but nothing is possible no matter what I try. I tried changing the width attribute for the table cells but then nothing is possible. What can I do about this bug?

<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

You have the following style:

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

remove this and your text will wrap

If you want to keep this style but not wrap that particular column, then override the style:

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

Answer 2

Have you tried white-space: normal; ?

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

Updated fiddle

Answer 3

Remove the white-space: nowrap property from td ie class .title-details

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

or you can give css property to .title-detail class

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