CSS 显示属性在移动浏览器中不起作用

Question

位于：http://phoenixchange.com/test/170518_TextTest.html 的文档经过验证，并在"大多数"浏览器中按预期显示，但在例如移动Safari中仍未显示。 (请参阅下面的编辑 8( 任何人都可以解释这一点以及如何解决？

.CSS

.hideaway {
    font-family: arial;
    font-style: italic;
    }
.hiddentxt {
    white-space: pre-wrap;
    letter-spacing: 0.1em;
    }
.hideaway .hiddentxt {
    display: none;
    }
.hideaway:hover .hiddentxt {
    display: inline;
    color: white;
    font-family: times;
    font-weight: normal;
    background: blue;
    }

.HTML <p>Accusantium doloremque..odit aut fugit.<span class="hideaway"><br><span class="link normal">[more]</span> <span class="hiddentxt"><br> Interested ? Contact me for details ! </span></span></p>

....

编辑 8代码 W3C 验证(不必要的;字符，例如<span class="link normal";>删除(。 下面的答案只是这篇文章中的错别字。 文档在以下位置正确显示：
手机： 三星， 铬， 火狐
桌面：Safari，Firefox，IE，Opera
但仍然不在：
手机：迷你歌剧，野生动物园
显然，Safari 移动和 Opera Mini 都是重要的移动浏览器，所以我真的希望任何代码都可以在这些浏览器上运行(即使用"当前千年"浏览器(。 我没有成功地找到在它们/"当前千禧年"(移动(浏览器的安全 html/css 子集上不起作用的 CSS 特定信息。

Answer 1

<span class="hideaway"缺少>

这就是为什么您应该始终使用空格和编码程序(而不是记事本(！

.hideaway {
    font-family: arial;
    font-style: italic;
    }
.hiddentxt {
    white-space: pre-wrap;
    letter-spacing: 0.1em;
    }
.hideaway .hiddentxt {
    display: none;
    }
.hideaway:hover .hiddentxt {
    display: inline;
    color: white;
    font-family: times;
    font-weight: normal;
    background: blue;
    }

<p>
    Accusantium doloremque..odit aut fugit.
    <span class="hideaway">
        <br>
        <span class="link normal";>
            [more]
        </span> 
        <span class="hiddentxt">
            <br> 
            Interested ?  Contact me for details ! 
        </span>
    </span>
</p>

在 https://drivenotepad.github.io/编辑和检查代码

您可以使用标题属性

title 属性指定有关元素的额外信息。

当鼠标移到元素上时，信息通常显示为工具提示文本。

<p title="Interested ?  Contact me for details !">[more]</p>

一旦它们将鼠标悬停在带有标题的元素上，这将显示更多信息。