How do I word-wrap links in a table cell so that it doesn't break the flow of the table?

css, html

Solution

The `word-break` property can force wrapping to occur when the lines are too long

http://tinker.io/ca0ae

td {
    word-break: break-all;
    word-break: break-word;
}

Problem

I have the following HTML and 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>"; } ?> ``` With this 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; } ``` But whenever I press the button that processes that PHP, I get things like this: Where they're still breaking the page layout ruthlessly. How do I fix this?

Original source