Question

位于http://phoenixchange.com/test/170518_TextTest.html的文档已经过验证，并按照预期显示在＆＃34;大多数＆＃34;浏览器，但仍然没有在移动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 Accusantium doloremque..odit aut fugit. [more] Interested ? Contact me for details ! 

...

编辑8 代码W3C已验证（不必要的;个字符，例如已删除）。以下答案仅限于此帖子中的错字。文档正确显示在：
手机：三星，Chrome，Firefox 桌面：Safari，Firefox，IE，Opera
但仍然不：中手机：Opera Mini，Safari
显然，Safari移动设备和Opera Mini也是重要的移动浏览器，所以我真的希望任何代码能够在这些浏览器上运行（例如，使用＆＃34;当前的千禧和浏览器）。我没有成功找到特定信息的CSS，这些信息不适用于他们/在安全的html / css子集上用于＆＃34;当前的千禧年＆＃34; （移动）浏览器。

Answer 1

这就是为什么你应该总是使用空格和编码程序（而不是记事本）！

.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/

处的代码

You could use the title attribute

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

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

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

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

CSS显示属性无法在移动浏览器中使用

1 个答案: