CODEWITHSUNDEEP
csshtml
Sam
Sam

Reputation: 433

HTML: Word-Wrap not supporting

From below html code I want to show complete table in page without horizontal scrollbar. I want to set html table width fit to screen. there is continuous text in td which I want to break and show in multiple lines such that table width will not go out of page.

For that I used word wrap property but it will not work. Please suggest me possible solution.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table style="table-layout:fixed;">
         <tr>
            <td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>  
            <td style="word-wrap:break-word;">jhdjhfjsjkfhjshdjfhjshfsbfsjkshdfjhsfjsdfdfjsndjkfnjsdnfsdfnsdjfnnsdjfnsdjnfjsdnf,sdnmfksdfsdfsdfsdnfklsdmklfmsdfsd,fsdfsdkfksdnmfnmsdkfnmsdmfmdfmd,.mf,dmf,msd,fm,sdmf,.smd,.fms,dmfms,dmf,s.dmf,.smdf,.smd,fmsdfm,.sdm,f.sdm,f.msd,.fms,.dmf,.sdmf,.sdmf,.smd,.fmsd,mf,.sdmf,.smd,.fmsd,.fm,sdmf,msd,.fms,.dmf,.sdmf,.sdmfsdmfsdf,.sdf,sdfsdfsdfsdf</td>  
         </tr>
    </table>
</body>
</html>

Upvotes: 0

Views: 122

Answers (2)

user3074446
user3074446

Reputation: 124

To use style="word-wrap: break-word; you have to fix the outer tag width.

table{
     width:100%;
}

Upvotes: 0

George
George

Reputation: 36784

The table (and by further extension, the cells) has no constriction, meaning it will stretch to fit around the content within it, so there is no reason for your words to be broken.

Try giving your table a width:

table{
    width:100%;
}

JSFiddle

Upvotes: 1

Related Questions