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

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -