时间戳

首页 > 解决方案 > 在 CSS 中隐藏其他元素

html - 在 CSS 中隐藏其他元素

问题描述

我想显示一个文本动画，其中第二个文本从底部移入，第一个文本移到顶部。这是基本的 HTML 结构：

<span style="position: relative; overflow: hidden; padding-right: 100px;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

为简洁起见，省略了动画和布局细节。

更新：这是一个完整的示例供您使用：http: //jsfiddle.net/xpvt214o/577089/

我的主要问题是外部元素不应该是可见的，但它是。该overflow属性根本没有影响。我该如何解决这个问题？

外部span元素是inline因为它在其他文本中流动。只有部分句子应该换掉。动画文本必须与句子的其余部分正确对齐。inline-block因为外部元素不这样做。

transition: top 0.5s剪辑也必须在内部元素 ( )的动画期间应用。

我找到了 CSS 属性clip和clip-path. 前者已被弃用（它也不起作用），而后者是实验性的，并非所有必需的浏览器都支持（在 Firefox 中也失败）。

标签： htmlcss

解决方案

您必须使用 inline-block 或 block 才能使剪辑工作。问题是：如果你有一个只包含绝对定位的子元素或为空的块状元素，它不会有任何维度 - 你必须手动设置它。尝试：

<span style="display: inline-block; position: relative; overflow: hidden; padding-right: 100px; height: 1.2em; line-height: 1.2em; vertical-align: bottom;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

推荐阅读