编辑：

Question

我有以下HTML / CSS：

<table>
    <tr>
        <td>
            <div>
                <pre>
                    <code>
This is a test!
This is a very long line that is designed to exceed the length of the visible area of the page. This is a very long line that is designed to exceed the length of the visible area of the page.
                    </code>
                </pre>
            </div>
        </td>
    </tr>
</table>

正如预期的那样，第二行内容超出了页面的可见区域。但是，我不希望这种情况发生，因此我将<code>行修改为如下所示：

<code style="overflow: hidden;">

但是，内容仍然超出可见页面长度。我只是希望文本被截断。我已经尝试将overflow: hidden移动到其他标签，但仍然没有运气。

以下是jsfiddle.net上的示例，您可以在其中看到它并使用它。

注意：我需要让<pre>成为页面的确切宽度（在上面的示例中，假设表格是页面的宽度）。

编辑：有额外的标签，因为我省略了一些不适用的其他代码 - 如果没有表格，问题就不会显现出来

Answer 1

div {
   width: 300px; /* or pick a width */
  overflow: hidden;  
}

诀窍。

但我不得不说，这是多么奇怪的标记混合。首先，你为什么还需要这张桌子？

Answer 2

您应将pre和code标记包含在div标记内，因为div标记更容易处理ovreflow属性。并且您还需要指定div的width和height，因为overflow属性在没有宽度和高度的情况下不起作用。

<table>
<tr>
    <td>
        <div style="overflow: hidden; width: 200px; height: 200px">
            <pre>
                <code>
This is a test!
This is a very long line that is designed to exceed the length of the visible area of the page. This is a very long line that is designed to exceed the length of the visible area of the page. 
               </code>
            </pre>
        </div>
    </td>
</tr>
</table>

Answer 3

您需要做的就是为<div>标记提供width属性。那你就定了。

<div style="width:200px; overflow:hidden;">
    <pre>
        <code>This is a test!
            This is a very long line that is designed to exceed the length of the visible area of the page.  This is a very long line that is designed to exceed the length of the visible area of the page. 
        </code>
    </pre>
</div>

哦......然后放弃桌子。

HERE IS YOUR UPDATED JSFIDDLE

编辑：

如果你需要宽度与页面的宽度完全相同，你可以做一些JavaScript魔术来获得innerWidth

http://www.javascripter.net/faq/browserw.htm

因此，您只需将<div>宽度设置为页面的innerWidth即可。然后，Div内的所有内容都将适合您。

Answer 4

display:block;
width:200px;
overflow:hidden

如果你不想使用div。

CSS'溢出'属性有问题

4 个答案:

编辑：