-1

私はこのHTMLを持っています。表示どおりに 2 つのセクションを配置しようとしていますが、多くのテキストが幅を超えて制限を超えている場合、どうすればよいですか? ありがとうございました。

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

1 に答える 1

1

試し てみるとword-wrap: break-word;、css好きなようにテキストを実装または制限するのに役立ちます

css を使用して、このWord-wrap を確認してください。

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

これがあなたを助けることを願っています

于 2013-07-25T17:26:50.780 に答える