मैं टेबल सेल में वर्ड-रैप लिंक कैसे कर सकता हूं ताकि यह तालिका के प्रवाह को तोड़ न सके?

Question

मेरे पास निम्न 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>"; 
      } 
     ?> 

इस सीएसएस के साथ:

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 प्रक्रियाओं दबाते हैं, तो मैं इस तरह बातें:

जहां वे अभी भी पेज लेआउट को क्रूरता से तोड़ रहे हैं।

मैं इसे कैसे ठीक करूं?

Answer 1

word-break संपत्ति होने की रैपिंग मजबूर कर सकते हैं जब लाइनों बहुत लंबे हैं

http://tinker.io/ca0ae

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

Answer 2

तुम हमेशा PHP side पर यह कर सकता है:

echo "<tr><td><a href='" . $bookmark_url . "'>" . wordwrap($bookmark_url, 40, "\n") . "</a></td> <td>" . $bookmark_title . "</td></tr>"; 

Answer 3

संपादित td सीएसएस में:

td { 
    width: 60px; 
    color: #444; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
}