Question

我有这个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;
}

Answer 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;
}

希望这会对你有所帮助

每行的CSS文本限制

1 个答案: