每行的CSS文本限制

时间:2013-07-25 17:12:45

标签: html css

我有这个HTML我试图把它放在两个部分,但是如果我有很多文字超出宽度并超出限制,我该怎么办?谢谢。

这是HTML:

<table>
    <thead>
        <tr>
            <th>Email Id</th>
            <th>M/V</th>
            <th>Ports</th>
            <th>Read</th>
        </tr>
    </thead>
    <td>5</td>
    <td colspan="2">
        <section id="top">
            <div id="titles"><b>Inline Results</b>
            </div>
            <section class="left">MV AMBRA DWT 18.536 OPEN: Puerto Quetzal 26 JULY 2013</section>
            <section class="right">quetzal</section>
        </section>
        <section id="bottom">
            <div id="titles"><b>Outline Results</b>
            </div>
            <section class="left">MV AMBRA DWT 18.536 OPEN: Puerto Quetzal 26 JULY 2013 Alternati M/v AMBRA DWT 18.536 MT on 9,4 mtrs Built 2007 – MALTA Flag 3 x 4</section>
            <section></section class="right">Puerto Quetzal</section>
    </td>
    <td>Read</td>
    </tr>
</table>

这是重要的CSS:

.left
{
    text-align:justify;
    display:table-cell;
    width:50%;
    float:left;
}
.right
{
    text-align:justify;
    display:table-cell;
    width:50%;
    float:right;
}
#top
{
    margin:0;
    padding:0;
    width:100%;
    display:table;
}

#bottom
{

    display:table;
    margin:0;
    padding:0;
    width:100%;
}
#titles
{
    text-align:center;
    margin:0;
    padding:10px;
}

1 个答案:

答案 0 :(得分:1)

您可以在word-wrap: break-word;中尝试css,它可以帮助您根据需要实施或限制文字

请查看此Word-wrap using css

.left
{
     word-wrap: break-word;
}
.right
{
     word-wrap: break-word;
}
#top
{
     word-wrap: break-word;
}

#bottom
{
      word-wrap: break-word;
}
#titles
{
     word-wrap: break-word;
}

希望这会对你有所帮助