Question 45780 in CSS Question posted in
Some basic documentation can be found here.

CSS "overflow: hidden;" still works on the pseudo "::after"

content: '>'; in ::after is clipped by overflow: hidden;

.centered-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 30vw;
}

.centered-text::before {
  content: '<';
}

.centered-text::after {
  content: '>';
}
<div style="text-align:center;">
  <span style="float:left;">I'm on the left</span>
  <span class="centered-text">a brown fox jumps over the lazy dog</span>
  <span style="float:right;">I'm on the right</span>
</div>

Result:

I'm on the left         <a brown fox jumps over th...          I'm on the right

The '>' in ::after is clipped.

What I expected is ‘>’ is still visible.

I'm on the left         <a brown fox jumps over th...>         I'm on the right

I had added overflow: visible; into ::after to override that in .centered-text but ‘>’ was still clipped.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    @InSync Thank you! The problem of additional wrapper is lots of spaces and disalignment of '<>' if I shorten the message to <span>a brown fox</span>


  2. 0

    .centered-text::after is considered a child of .centered-text, which means it will be treated as a normal, actual child element when it comes to overflow: hidden.

    A solution is to wrap the text inside another element and apply styles to that instead:

    <div>
  <span>...</span>
  <span class="centered-text">
    <span>a brown fox jumps over the lazy dog</span>
  </span>
  <span>...</span>
</div>

    .centered-text span {
  /* ... */
}

    Try it:

    .centered-text span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 30vw;
}

.centered-text::before {
  content: '<';
}

.centered-text::after {
  content: '>';
}
    <div style="text-align:center;">
  <span style="float:left;">I'm on the left</span>
  <span class="centered-text">
    <span>a brown fox jumps over the lazy dog</span>
  </span>
  <span style="float:right;">I'm on the right</span>
</div>
    Login or Signup to reply.
  3. 0

    You can use a css variable and use position absolute and set the css variable via javascript.

    const centeredText = document.getElementsByClassName('centered-text')[0]
const rect = centeredText.getBoundingClientRect()
document.documentElement.setAttribute("style", "--right-arrow-width: "+ rect.right+"px");
    :root {
  --right-arrow-width: 0px;
}
.centered-text {

    box-sizing: content-box;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30vw;
}
.centered-text::before {
    content: '<';
}
.centered-text::after {
      content: '>';
      left: var(--right-arrow-width);
      position: absolute;
}
    <body>
    <div style="text-align:center;">
        <span style="float:left;">I'm on the left</span>
        <span class="centered-text">a brown fox jumps over the lazy dog</span>
        <span style="float:right;">I'm on the right</span>
    </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search