代码之家 › 专栏 › 技术社区 › Nathan Osman

CSS“溢出”属性有问题

overflow properties css html

Nathan Osman · 技术社区 · 14 年前

我有以下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> 是页面的确切宽度(在上面的示例中,假设表是页面的宽度)。

编辑: 额外的标记在那里是因为我省略了一些其他不适用的代码——如果没有表,问题就不会显现出来。

4 回复 | 直到 14 年前

Chase Florell 14 年前

<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

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

< innerWidth

Robusto 14 年前

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

Zain Shaikh 14 年前

pre code 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>

Chase Florell 14 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前