html - 每行的 CSS 文本限制

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它将帮助你实现或限制你喜欢的文本

请使用 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;
}

希望对你有帮助