css selectors - Hide all text except for the first letter with CSS? -
is possible hide letters after first letter css?
dt:not(::first-letter) { display: none; }
you can, css wrong. version below works (at least in chrome). makes dt
invisible, , defines overrule first letter make visible again.
i tried same display
too, doesn't work, expected. visibility: hidden
hides content, keeps element in place, while display: none
removes flow, , makes impossible sub-elements (the first letter in case) become visible again.
i added hover too, can hover letter see rest of dt.
dt { visibility: hidden; } dt::first-letter { visibility: visible; } /* hover first letter see rest */ dt:hover { visibility: visible; }
hover see rest: <dt>lorum ipsum weird text</dt> <dt>foo bar</dt>
a side effect area covered text still claimed. maybe not issue, if need other solution. 1 possibility make font-size of dt
0
too. way, text small claims no space. won't if contains images, of course.
since doesn't seem work, here alternative using font-size. less ideal, still solve problem.
dt { font-size: 0; } dt::first-letter { font-size: 1rem; } /* hover first letter see rest */ dt:hover { font-size: 1em; }
hover see rest: <dt>lorum ipsum weird text</dt> <dt>foo bar</dt>
Comments
Post a Comment