locked
Word wrap not working RRS feed

  • Question

  • User82750387 posted
    <div class="div-Cell" style="width:74%;">      
           
            <div id="Filediv" class="scroller" style="overflow: scroll">
                <table id="tblFiles" class="tablesorter" style="width:100%">
                    <thead>
                        <tr class="header">
                            <th data-sort="string">Files</th>
                            <th data-sort="int" nowrap>Size(MB)</th>
                            <th data-sort="int" style="text-align:center">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="wrap"></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>            
            </div>
        </div>
    
    .wrap {
    word-wrap: break-word;
    word-break: break-all; 
    white-space: normal; 
    height:auto;
    }
    

    I have 3 columns in tblFiles that shows FileNames,Size & Date. I am populating this div using Jquery. When the filename is too big, I am trying to wrap the fileName ,but it is not being applied and occupying the whole length of the div,thus hiding the Date column. How this wrap the text with this Files column and fit all the three columns within the div ?

    Tuesday, December 8, 2015 12:08 AM

Answers

  • User-474980206 posted
    Markup looks fine (if place the CSS in a style tag) and works on my iPad. Which browser are you having trouble with.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 1:32 AM
  • User61956409 posted

    Hi madhu1234,

    The code works fine in IE11 on my side.

    <style>
        tbody tr td {
     text-align: center;
         }
    
        .wrap {
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
            height: auto;
        }
    </style>
    
    Table1:
    <br />
    <div class="div-Cell" style="width: 74%;">
    
        <div id="Filediv" class="scroller" style="overflow: scroll">
            <table id="tblFiles" class="tablesorter" style="width: 100%">
                <thead>
                    <tr class="header">
                        <th data-sort="string">Files</th>
                        <th data-sort="int" nowrap>Size(MB)</th>
                        <th data-sort="int" style="text-align: center">Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="wrap">filenamefilenamefilenamefilenamefilenamefilenamefilenamefilenamefilename</td>
                        <td>100M</td>
                        <td>2015/12/8</td>
                    </tr>
                </tbody>
            </table>
    
            <br />
            Table2:
            <br />
            <table id="tblFiles1" class="tablesorter" style="width: 100%">
                <thead>
                    <tr class="header">
                        <th data-sort="string">Files</th>
                        <th data-sort="int" nowrap>Size(MB)</th>
                        <th data-sort="int" style="text-align: center">Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>filenamefilenamefilenamefilenamefilenamefilenamefilenamefilenamefilename</td>
                        <td>100M</td>
                        <td>2015/12/8</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 5:45 AM

All replies

  • User-474980206 posted
    Markup looks fine (if place the CSS in a style tag) and works on my iPad. Which browser are you having trouble with.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 1:32 AM
  • User61956409 posted

    Hi madhu1234,

    The code works fine in IE11 on my side.

    <style>
        tbody tr td {
     text-align: center;
         }
    
        .wrap {
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
            height: auto;
        }
    </style>
    
    Table1:
    <br />
    <div class="div-Cell" style="width: 74%;">
    
        <div id="Filediv" class="scroller" style="overflow: scroll">
            <table id="tblFiles" class="tablesorter" style="width: 100%">
                <thead>
                    <tr class="header">
                        <th data-sort="string">Files</th>
                        <th data-sort="int" nowrap>Size(MB)</th>
                        <th data-sort="int" style="text-align: center">Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="wrap">filenamefilenamefilenamefilenamefilenamefilenamefilenamefilenamefilename</td>
                        <td>100M</td>
                        <td>2015/12/8</td>
                    </tr>
                </tbody>
            </table>
    
            <br />
            Table2:
            <br />
            <table id="tblFiles1" class="tablesorter" style="width: 100%">
                <thead>
                    <tr class="header">
                        <th data-sort="string">Files</th>
                        <th data-sort="int" nowrap>Size(MB)</th>
                        <th data-sort="int" style="text-align: center">Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>filenamefilenamefilenamefilenamefilenamefilenamefilenamefilenamefilename</td>
                        <td>100M</td>
                        <td>2015/12/8</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 5:45 AM
  • User82750387 posted

    Thank you very much. It finally worked for me when I do a Ctrl + F5.

    Tuesday, December 8, 2015 10:17 PM