Question 315801 in Html Question posted in
Some basic documentation can be found here.

How to ensure word wrapping within the screen width with html and bootstrap

I’m making a web application on Flask, Mongodb, HTML and Bootstrap. My problem is that words in a table column go off the screen and I need to scroll browser window to read them.

Could you please give me an advice which bootstrap classes or additional HTML tags I should use to make word wrapping works well and the text in tag fits in the screen size?

My HTML page:

<div class="container-fluid">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Field</th>
                <th scope="col">Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ID</td>
                <td>{{page.page_id}}</td>
            </tr>
                <td>Description</td>
                <td><pre><p class="text-break">{{page.body}}</p></pre></td>
            </tr>
        </tbody>
    </table>
</div>

And that is how it looks in browser (Firefox):
enter image description here

I tried to use different classes but nothing helped(
Thank you in advance!

Edit-1:
That is how my text exists in mongoDB:
enter image description here
So if I delete <pre> tag line breaks between paragraphs will lost and an appearance in the HTML page will be like on the screenshot:
enter image description here

Tags:

2

Answers


  1. 0

    Delete <pre> tag.

    If you need to set size
    sizing
    or
    overflow

    Login or Signup to reply.
  2. 0

    You Can add a class to your pre tag class="text-wrap overflow-auto"

    In your Code

    <td>Description</td>
<td><pre class="text-wrap overflow-auto"><p class="text-break">{{page.body}}</p></pre></td>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search