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

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -