如何使用css使表格在长文本上使用多行

Question

如何让表格在每行上使用多行超出该表的@Component({ selector : 'a[triggerResize]', //select all <a> tags with triggerResize attribute template : '<em class="fa fa-navicon"></em>' })

max-width

.table {
  font-size: 12px;
  border-bottom: 1px solid #dddddd;
  color: #8d8d8d;
  max-width: 400px;
}
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
  padding: 7px; 

}
tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
td {
  background:#FFFFFF;
  vertical-align:middle;
  word-wrap:break-word;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
  padding: 7px;
}

Answer 1

我会给你两个解决方案。

表格单元格中的静态创建文本

TD Cell中的文本是在您开发网站时给出的，而不是由自动创建的，比如说XML响应。然后根据http://www.uwec.edu/help/html/tb-multiline.htm，这是你的答案：

  

当单个表格单元格中的文本超过几个单词时，换行符（＆lt; BR＆gt;）   可以改善桌子的外观和可读性。这条线   中断代码允许将数据拆分为多行。放线   中断代码＆lt; BR＆gt;在您想要该行的点的文本内   打破。请注意下面的示例中的换行符代码可以是   用于数据单元格和标题中。

     

请记住，文档的用户可以最终控制字体   和大小。一些换行符代码，但适合你的   偏好设置，在其他条件下可能不合适。

在表格单元格

中动态创建文本

否则，如果单元格中的文本是动态的，而您不知道它的实际大小，则可以进行以下操作：

1. 将类添加到要放置效果的表格单元格中。尽管如此，没有必要这样做。

2. 将以下内容添加到您想要的表格列的样式中。我希望它对您有所帮助。

   text-wrap: normal;
   word-wrap: break-word;
   

Answer 2

只需将word-wrap: break-word;添加到您的td CSS即可。 如果您只想使用一行并隐藏额外符号，请使用overflow: hidden;