相关疑难解决方法(0)

HTML表格中的自动换行

我一直在用s和s word-wrap: break-word包装文本.但是,它似乎不适用于表格单元格.我有一个表设置,有一行和两列.列中的文本虽然使用上面的样式,但不会换行.它会使文本超出单元格的边界.这种情况发生在Firefox,谷歌浏览器和Internet Explorer上.divspanwidth:100%word-wrap

以下是源代码:

td {
  border: 1px solid;
}
Run Code Online (Sandbox Code Playgroud)
<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

上面的长词大于我的页面的边界,但它不会破坏上面的HTML.我已经尝试了以下建议加入text-wrap:suppresstext-wrap:normal,但也有帮助.

html css html-table

540
推荐指数
21
解决办法
68万
查看次数

如何在换行符上包装长单词,并避免使用CSS进行水平滚动?

我有以下的HTML:

<div class="box">
    long text here
</div>
Run Code Online (Sandbox Code Playgroud)

和css:

.box {
    width: 400px;
    height: 100px;
    overflow: auto;
    border: 1px gold solid; 
}
Run Code Online (Sandbox Code Playgroud)

我只想要一个垂直滚动.但是当一个单词太长时,会显示一个水平滚动.如何使长词包裹?

如果需要,我可以使用jQuery或PHP的技巧,但我想用CSS解决它,因为它是CSS的工作.

你可以在这里弄乱:http://jsfiddle.net/879bc/1/

css scroll word-wrap

10
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×2

html ×1

html-table ×1

scroll ×1

word-wrap ×1