Wrapping text in DataTables

Question

Wrapping text in DataTables

I am experiencing an issue with the cell content below:

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

Even though I have set the span width to 200px, it expands to over 400px - see screenshot here.

How can I ensure that the width is limited to 200px and words wrap within this cell?

html css datatables

Answer 1

Answer №1

To achieve the desired layout, make sure to include either 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>

Answer 2

To achieve the desired layout, make sure to include either 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>

Answer 3

Answer №2

One suggestion is to remove any extra spaces from the text you place in your spans, whether through JavaScript or C#.

In JavaScript :

myString = myString.trim();

In C# :

myString = myString.Trim();

If that doesn't solve the issue, try keeping the content within the <span></span> on a single line like this:

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

Span elements display their content inline by default, so any unnecessary whitespace will affect the length of the text.

Answer 4

One suggestion is to remove any extra spaces from the text you place in your spans, whether through JavaScript or C#.

In JavaScript :

myString = myString.trim();

In C# :

myString = myString.Trim();

If that doesn't solve the issue, try keeping the content within the <span></span> on a single line like this:

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

Span elements display their content inline by default, so any unnecessary whitespace will affect the length of the text.

Wrapping text in DataTables

Answer №1

Answer №2

Similar questions

Assigning a specific data type value to an element as it enters the top of the viewport

Using relative positioning in CSS causes the div to move to a new line

Float and tap

JQuery - Receive an error message when a value is missing

In Bootstrap 4, IE 11 struggles with images overflowing within a d-flex div containing an img tag

Update the CSS dynamically using JavaScript or AngularJS

CSS: Floating navigation bar that becomes fixed upon reaching the top of the page

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

Stylesheet compilation with SCSS scripts

Updating the ID's of nested elements in JavaScript when duplicating an element

Ways to elevate cells of different sizes?

Creating an editable list item with jQuery: A step-by-step guide

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

"Fixing index.html with the power of Bootstrap 4: A step-by

Angular app encounters issue with Firebase definition post Firebase migration

Difficulties with managing button events in a Vue project

Using JavaScript to implement responsive design through media queries

Is there a way to have a dropdown menu automatically expand when a selection is made in a different dropdown menu?

PHP Checkbox Form encountering Implode Errors

What could be causing my centrally-aligned divs to not scroll horizontally?