表格中的文字会进入不同的行,而不是增加表格的大小?

时间:2011-03-20 00:25:28

标签: html xhtml

我是HTML的新手,因为我决定跳过它并直接使用PHP。 但是我得到一个脚本来打印长文本,每次更长时间,然后HTML表设置宽度只是增长而不是它进入不同的行。我该如何改变?谢谢:D

继承我的代码:

<style type="text/css">
.style1 {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    background-image: url('file:///C:/wamp/www/style/images/banner.gif');
}
.style2 {
    font-size: small;
    color: #62D7D7;
}
.style3 {
    text-align: center;
}
.style4 {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    font-size: small;
    color: #0070B8;
}
.style5 {
    font-size: small;
}
</style>




    <table align="center" style="width: 28%; height: 100px">
        <tr>
            <td class="style1" colspan="2" style="height: 14px">&nbsp; JDiskwl1
            <strong>&nbsp;</strong><span class="style2">frank james</span></td>
        </tr>
        <tr>
            <td class="style3" style="width: 6px; height: 60px">Thumnail</td>
            <td class="style5" style="height: 60px"><?php print $example ?></td>
        </tr>
        <tr>
            <td class="style3" style="width: 6px">&nbsp;</td>
            <td class="style4">Respond (244) Like (12)</td>
        </tr>
    </table>

2 个答案:

答案 0 :(得分:1)

尝试添加

word-break: break-all

到您的表格样式。 See a demo here.

答案 1 :(得分:1)

假设您正在寻找类似的东西: Rendered by Firefox 4 以下代码可以解决这个问题:

<html>
        <head>
                <style type="text/css">
                        .style1 {
                                font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
                                background-image: url('file:///C:/wamp/www/style/images/banner.gif');
                        }
                        .style2 {
                                font-size: small;
                                color: #62D7D7;
                        }
                        .style3 {
                                text-align: center;
                        }
                        .style4 {
                                font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
                                font-size: small;
                                color: #0070B8;
                        }
                        .style5 {
                                font-size: small;
                        }
                </style>
        </head>
        <body>


                <table style="width: 700px; margin: auto;">
                        <tr>
                                <td class="style1" colspan="2" >JDiskwl1 <span class="style2">frank&nbsp;james</span></td>
                        </tr>
                        <tr>
                                <td class="style3">Thumnail</td>
                                <td class="style5">I am a complete novice at HTML as i decided to skip it and go straight to PHP. But i am getting a script to print long pieces of text and every time it is longer then the HTML table was set the width just grows instead of it going onto a different line. How do i change this? Thanks :D></td>
                        </tr>
                        <tr>
                                <td class="style3">&nbsp;</td>
                                <td class="style4">Respond (244) Like (12)</td>
                        </tr>
                </table>
        </body>
</html>