Word-Wrap on long words not working in bootstrap fluid containers

Question

I have been using bootstrap to make my page mobile friendly. My content is dynamically generated, so if someone puts a very long text (like lorem ipsum) it okay since i have a truncate, but i'm having problems with long words.

Heres the actual situation: Actual

And this is how i wish it would look like: Intended

I've tried the following solutions to no avail:

• bootstrap 3 wrap text content within div for horizontal alignment
• Word-wrap not working in bootstrap 3
• Twitter Bootstrap Button Text Word Wrap

I'm Using Bootstrap 3.3.2, Twig and Symfony. Here's the code

<tr class="row">
<td class="col-sm-12 clickable" data-toggle="modal" data-target="#myModal-{{pregunta.id}}">
    <div style="height:150px;overflow:hidden; text-overflow:ellipsis;">
        {{ pregunta.contenido|markdown|raw|truncate(150) }}
    </div>
</td>

And here is how its being rendered:

<tr class="row">
<td class="col-sm-12 clickable" data-toggle="modal" data-target="#myModal-4">
    <div style="height:150px;overflow:hidden; text-overflow:ellipsis;">
        <p>PreguntaaaaaaaaaaaaaaaaLargaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaioooooooooooo</p>

    </div>
</td>

i've also added the property

p{
word-wrap: break-word;}

To my css, and if i inspect the paragraph, it has it, also added the white-space: normal; and it didn't work

Answer 1

If you specify a width on the element, it should wrap itself without needing anything else. Have you tried that? Also i think word-wrap only works if you specify the width