当包含很长的链接时，表会将容器内部分开

Question

我有一张表显示以前创建的数据。我的问题发生在单词之间缺乏“空格”时，即一个很长的链接。当我有类似长链接的东西时，表突破容器（此应用程序在laravel上并使用bootstrap CSS），用户无法看到描述旁边的按钮。

我有什么想法可以解决这个问题吗？

问题出现之前的图片示例：

问题后的图片示例：

Answer 1

您可以使用CSS属性overflow-wrap执行此操作：

td {
  overflow-wrap: break-word;
}

它会破坏通常不会被破坏的单词，以避免溢出打破布局。

• MDN
• CSS Tricks

清除与word-wrap的混淆（引自MDN）：

  

该属性最初是一个非标准且没有前缀的Microsoft扩展，称为自动换行，并且由大多数具有相同名称的浏览器实现。它已被重命名为overflow-wrap，其中自动换行是别名。

Answer 2

似乎是css可以解决的问题。将此添加到您的CSS

td{
   word-wrap: break-word;
}

Answer 3

我们可以使用固定的表格布局，并以百分比为每列提供宽度值。

table {
     table-layout: fixed;
}

.row1 {
     width: 20%;
}