5

次の HTML と PHP があります。

        <?php
            if ($_POST["submit"] == "Get Articles") {
                $api_url = "https://DonutJuice:so%20many%20people%20in%20my%20bed@api.pinboard.in/v1/posts/all?format=json";

                $ch = curl_init();

                curl_setopt($ch, CURLOPT_URL, $api_url);
                curl_setopt($ch, CURLOPT_HEADER, FALSE);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

                $json = curl_exec($ch);

                curl_close($ch);

                $values = json_decode($json, true);

                echo "<div class='article-output'>";
                echo "<table>";
                echo "<tr><th>URL</th> <th>Title</th></tr>";

                foreach ($values as $bookmark) {
                    $bookmark_url = $bookmark["href"];
                    $bookmark_title = $bookmark["description"];
                    echo "<tr><td><a href='" . $bookmark_url . "'>" . $bookmark_url . "</a></td> <td>" . $bookmark_title . "</td></tr>";
                }

                echo "</table>";
                echo "</div>";
            }
        ?>

この CSS では:

table {
    margin-top: 50px;
    padding: 5px 20px;

    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #a9a8a7;
    border-radius: 5px;
}

tr {
    height: 50px;
}

th {
    color: #173769;
}

td {
    width: 60px;
    word-wrap: break-word;

    color: #444;
}

    td:first-child {
        padding-right: 30px;
    }

しかし、その PHP を処理するボタンを押すたびに、次のようなメッセージが表示されます。

ここに画像の説明を入力

彼らがまだ容赦なくページレイアウトを壊している場所。

これを修正するにはどうすればよいですか?

4

3 に答える 3

4

このword-breakプロパティは、行が長すぎる場合に強制的に折り返すことができます

http://tinker.io/ca0ae

td {
    word-break: break-all;
    word-break: break-word;
}
于 2013-04-10T17:46:46.470 に答える
1

PHP 側でいつでも実行できます。

echo "<tr><td><a href='" . $bookmark_url . "'>" . wordwrap($bookmark_url, 40, "\n") . "</a></td> <td>" . $bookmark_title . "</td></tr>";
于 2013-04-10T17:31:59.733 に答える
0

tdCSS で編集:

td {
    width: 60px;
    color: #444;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
于 2013-04-10T17:37:46.743 に答える