Solve the problem of automatically hiding and displaying ellipses when the content in the html table exceeds the width without forcing line breaks_html/css_WEB-ITnose

In table layout, we often encounter situations where the layout is chaotic due to changes in the length of the table content. At this time, we may have to write the cell width to ensure stable layout; but we set I checked the width but found that it will automatically become larger after exceeding the width. Using CSS to define the overflow:hidden; attribute of the element does not work. The final solution I found is as follows:

table{       table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */}td{    width:100%;    word-break:keep-all;/* 不换行 */    white-space:nowrap;/* 不换行 */    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}

如果担心隐藏了看不到完整的单元格内容建议在单元格上面加上title属性值就是单元格的完整内容这样只要鼠标经过就能显示全部了