0

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?

2 Answers 2

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>

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

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.