如果文本是URL，则jquery dataTable不能中断文本

Question

我正在与密码管理员网站合作。在这个项目中，它显示了一个jquery数据表，其中包含网站、用户名、密码和注释。但是，网站栏将URL显示为一行，如果URL太长，栏宽将会太大。

但有趣的是，如果表格的注释列太长，将会中断文本。

例如:

URL(will not break): http://www.text.com/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/too_long_cannot_show/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
Username:Username
Password:Password
Note(will break which depend on window's width): I am note.I am note.I am note.I am note.I am note.I am note.I am note.I am note.*100

I have try:

create a div to contain the table, then set its max-width:1000px ==> fail
override the dataTable class, set its max-width:1000px ==> fail

任何想法?

Answer 1

与数据表无关。你的笔记文本包含空格，而URL不包含任何空格(纯HTML/CSS的东西)。

在换行不破坏单词含义的地方使用word-break: break-all;(如URL)

.auto-break {
  word-break: break-all;
}

<table>
  <tr>
    <td class="auto-break">http://www.text.com/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/too_long_cannot_show/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
  </tr>
</table>