Question

我正在尝试构建专为移动设备设计的网络应用。但我有一些非常大的链接。我想要做的是在文本不适合的情况下打破这些字符串，如果适合则使用整个字符串。

我尝试使用word-wrap:break-word：

.breakWord {
    width: 100% 
    word-wrap: break-word;
}

我的HTML是：

<table>
  <tr>
   <td rowspan="2" style="width:10%" >picture</td>
   <td colspan="2" style="width:90%" class="breakWord">link</td>
  </tr> 
   <tr>
    <td style="width:80%">info1</td>
   <td style="width:10%">info2</td>
   </tr>
  <tr>
  </tr> 
</table>

此代码不适合页面 - 显示水平滚动条。

如何使文字合适？

Answer 1

如果您更正了来源中的错误，它就会有效。

从样式块中删除width:100%。它与td中的内联样式冲突，并且错过了分号
colpan应为colspan

此外，我相信某些浏览器在遇到具有宽度样式的colspanned td时会感到困惑。您可以安全地删除style="width:90%"，因为下面的两个td已经正确设置了宽度。

修改
所以它无处不在。根据{{3}}的答案，问题在于表格：首先，计算表格的宽度，然后将10％和90％作为计算宽度而不是屏幕上的可用宽度。
因此，一种可能的解决方案是为表提供特定的宽度，并将其表格布局设置为固定。

<table style="width:100%; table-layout:fixed">

移动网络应用程序与很长的字符串

1 个答案: