CODEWITHSUNDEEP
htmlcss
Niklas Rosencrantz
Niklas Rosencrantz

Reputation: 26647

Wrap text to new line inside table cells

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

enter image description here

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>

Upvotes: 2

Views: 2046

Answers (3)

Prachi Gharde
Prachi Gharde

Reputation: 74

Remove the white-space: nowrap property from td i.e 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;
}

Upvotes: 1

Pete
Pete

Reputation: 58432

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;
}

Upvotes: 5

CDelaney
CDelaney

Reputation: 1248

Have you tried white-space: normal;?

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

Updated fiddle

Upvotes: 1

Related Questions