4

I'm trying to break a text inside a <td>. I tried some solutions poroposed but it seems none of them works.

Possible Duplicate: Word-wrap

I want to break a big link. Here's my code:

<div style="padding-top: 250px;  margin-right: 25px;">
        <table style="table-layout:fixed; width:700px;">
            <col width="300">
            <col width="10">
            <col width="10">
            <col width="10">
            <col width="10">
            <thead>
                <tr>
                    <th class="desc">Link</th>
                    <th class="unit">Price</th>
                    <th class="qty">Amount</th>
                    <th class="service">TVA</th>
                    <th class="total">TOTAL</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td class="desc" style="overflow:hidden; word-wrap: break-word;
                            word-break: break-all;">Link</td>
                        <td >price</td>
                        <td >amount</td>
                        {% if oProd.tva %}
                            <td>tva%</td>
                        {% else %}
                            <td>TVA non existante</td>
                        {% endif%}
                        <td>inal_price</td>
                        {% set total = total + final_price%}
                    </tr>
                {% endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2"></td>
                    <td colspan="2">Prix final</td>
                    <td>{{ total }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

Now here's my CSS for desc:

    .service .desc h4 {
    font-size: 22px;
    line-height: 25px;
}
.service .desc {
    padding: 0 15px;
    overflow: hidden;
}
table .desc {
    text-align: left;
    background: #D0D0D0;
}
Community
  • 1
  • 1
Besbes Riadh
  • 811
  • 2
  • 10
  • 23
  • Can you post the CSS for `.desc` and you could try specifying column widths using either `60%` or `300em` etc. On a separate note this might improving browser compatibility `td { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } ` [source](https://perishablepress.com/wrapping-content/) – Mousey Jul 20 '15 at 03:50
  • try this: `table tr td, table tr th { page-break-inside: avoid; }` – Matteo Jul 20 '15 at 10:55
  • @Mousey do you think I'm overwitten something? – Besbes Riadh Jul 21 '15 at 12:17
  • @Matteo that did not work for me. Any other suggestions? – Besbes Riadh Jul 21 '15 at 12:24
  • Hi @BesbesRiadh, sorry i use the [knplabs/knp-snappy-bundle](https://github.com/KnpLabs/KnpSnappyBundle) and my comment is the solution at the same problem but with that bundle.... – Matteo Jul 21 '15 at 15:10

1 Answers1

2

@Besbes Riadh the code I posted will make word-wrap: break-word work for different browsers and different versions of CSS. It can be added to the end of your CSS. Explanation and source

Mousey
  • 1,855
  • 19
  • 34
  • 1
    I did get back to this problem now and your solution worked fine! Now I'm trying to make my site responsive, I hope that this doesn't make my fields look crowded. – Besbes Riadh Oct 02 '15 at 14:03