Word wrap in DataTables

Question

I have this cell content:

<td style="max-width:200px;" class="sorting_1">
<i class="fa fa-circle text-success"></i>
<span style="width: 200px;">
    Публикация: "The Myth of Ponce de León and the Fountain of Youth"                                    
</span>

<div class="mt-1">
    <span class="text-small text-muted">
        ID: 23843933046690590                                        
    </span>
</div>
</td>

But span does not get 200px width and expands to 400+ px - http://joxi.ru/823BXGpH9ZdEMm

What should I do to limit width to 200px and wrap words in this cell?

Lumi · Accepted Answer · 2020-01-07 12:44:56Z

1

You need to add display: block or display: inline-block

.maxWidth {
  width: 200px;
  display: inline-block;
}

<td style="max-width:200px;" class="sorting_1">
<i class="fa fa-circle text-success"></i>
<span class="maxWidth">
    Публикация: "The Myth of Ponce de León and the Fountain of Youth"                                    
</span>

<div class="mt-1">
    <span class="text-small text-muted">
        ID: 23843933046690590                                        
    </span>
</div>
</td>

answered Jan 7, 2020 at 12:44

Lumi

4492 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fdrobidoux · Accepted Answer · 2020-01-07 14:51:27Z

0

Another idea would be to trim whitespace from the strings you put in your spans, using either JS or C#.

In JS :

myString = myString.trim();

In C# :

myString = myString.Trim();

If that's not fixing it, try putting the content within the <span></span> in one line, like so :

<span class="text-small text-muted">ID: 23843933046690590</span>

Since span has its content as a inline by default, whitespace will count towards the length of the content.

answered Jan 7, 2020 at 14:51

fdrobidoux

2954 silver badges11 bronze badges

Collectives™ on Stack Overflow

Word wrap in DataTables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related