1

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:

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

Community
  • 1
  • 1
Aoshido
  • 29
  • 7

1 Answers1

0

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

konnection
  • 433
  • 4
  • 13
  • 1
    I cant specify a width, or it'll look good either on Mobiles or on desktops, not both. In other words i'd lose the bootstrap fluid containers – Aoshido Nov 13 '15 at 20:52
  • How about setting max-width on p element ? – konnection Nov 13 '15 at 21:06
  • 1
    Same situation as before, if i set a max width (for example) of 100px, it would look good on mobiles but not on desktops. If i set a larger max width , it would be the opposite – Aoshido Nov 13 '15 at 21:08