Zmniejszenie zaznaczenia tekstu w pionie

pytanie zadane 9 listopada 2021 w HTML i CSS przez FabQ Początkujący (450 p.)

Witam, czy wie ktoś jak mógłbym zmniejszyć zaznaczenie tekstu w pionie? Na mojej stronie www wygląda to tak jak na obrazku nr. 1 a chciałbym żeby wyglądało jak na obrazku nr.2

1. 2.

komentarz 9 listopada 2021 przez SzkolnyAdmin Szeryf (88,320 p.)

Były łatwiej, gdybyś zamieścił kod, a tak to tylko wróżenie.

2 odpowiedzi

odpowiedź 15 listopada 2021 przez VBService Ekspert (255,680 p.)
wybrane 16 listopada 2021 przez FabQ

Najlepsza

Może wstaw napis "Federation" do tzw. "kontenera"

przykład

<div class="line-height">Federation</div>
<br />

<div class="flex"><span>Federation</span></div>
<br />

<div class="grid"><span>Federation</span></div>
<br />

<div class="translate"><span>Federation</span></div>

div {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: gray;
  font: 700 1.2em monospace;
  user-select: all;
}
div::before {
  content: attr(class);
  position: absolute;
  font: 300 0.7em monospace;
  bottom: 0.1em;
  left: 0.1em;
  color: yellow;
}
div::selection {
  background-color: orange;
}
div span::selection {
  background-color: limegreen;
}

div.line-height {
  text-align: center;
  line-height: 3em;
}
div.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
div.grid {
  display: grid;
  place-items: center;
}
div.translate span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

window.onload = () => {
  const texts = document.querySelectorAll('div');
  let i=-1;
  setInterval(() => { selectText(texts[(i<texts.length-1) ? ++i: i=0]); }, 1000);    
}


// https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
function selectText(el) {
    var doc = window.document, sel, range;
    if (doc.getSelection && doc.createRange) {
        sel = doc.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}