CSS display property not working in mobile browsers

Question

The document at: http://phoenixchange.com/test/170518_TextTest.html is validated and displays as intended in "most" browsers but still not in e.g mobile Safari. (pls. see Edit 8 below) Can anyone explain this and how to fix?

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 ! 

....

EDIT 8 Code W3C Validated (unnecessary ; characters e.g  deleted). Answer below is re typo in this post only. The document displays correctly in:
Mobiles: Samsung, Chrome, Firefox
Desktop: Safari, Firefox, IE, Opera
but still not in:
Mobiles: Opera Mini, Safari
Safari mobile obviously, and Opera Mini too, are important mobile browsers so I really want any code to work on these (i.e with "current millenium" browsers). I've had no success finding specific information re CSS that does not function on them / on a safe html/css subset for "current millenium" (mobile) browsers.

http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers — Luís P. A., May 19 '17 at 14:07
I hadn't. If I understand, `flex` specifies a length for the hidden element? The issue here though is that there is no `:hover` change to the element at all. The browsers don't recognise any of it for some reason. EDIT - my mistake! `display:flex` _"Displays an element as a block-level flex container. New in CSS3"_. Still, the problem I have here is no recognition rather than incorrect action. — talvi, May 19 '17 at 14:19
BUT THANK YOU!! That feature is useful to know about! The page I posted tested typography and layout. The inline hidden-text is not designed for the situation it's used in there but it provides a way to see how it works (or doesn't in this case!). — talvi, May 19 '17 at 14:30

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

That is why you should always use white space and coding programs (and not notepad)!

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

Edit and check code at https://drivenotepad.github.io/

You could use the title attribute

The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

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

This will show more information once they hover over the element with title.

FF might autocorrect errors and assume you meant to end the tag, but I would recommend fixing this. AND use white space! — Zekrom_Vale, May 19 '17 at 16:56
Thanks. That mistake is a typo in the code I copy pasted here. On the page the tag is present. I've edited the OP but left the formatting of the code as is as I am using `white-space: pre-wrap;`. — talvi, May 19 '17 at 20:41

CSS display property not working in mobile browsers

1 Answers1