Can we change the color of the overflown text?

user_3177651 0
Viewed 119

If I have a div with overflow: visible;, can I make the color of the overflow text different than the color of the text inside the div?

Something like this (the black box is the div):

<div style="overflow: visible; max-width: 200px;">
    Text will for sure overflow
</div>

enter image description here

css
4 Answers

Maybe with a pseudo element placed over the actual div dimensions, and using mix-blend-mode to get it to turn red color applied to the whole text, dark again:

div {
  position: relative;
  overflow: visible;
  max-width: 100px;
  white-space: nowrap;
  border: 1px solid black;
  color: #f00;
}
div::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: #fff;
  mix-blend-mode: color;
}
<div>Text will for sure overflow</div>

Not sure whether that might collide with any additional requirements for whole page backgrounds or something though, you’d have to test it in whatever specific scenario you need it in.

Instead of mix-blend-mode, applying some sort of filter might give similar results.

user_14278780

backdrop-filter can also do it

.box {
  position: relative;
  max-width: 100px;
  white-space: nowrap;
  padding: 3px;
  border: 1px solid black;
  color: #f00;
}

.box::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: grayscale(1);
}
<div class="box">Text will for sure overflow</div>

Or use background coloration like below:

.box {
  --d:100px;
  position: relative;
  max-width: var(--d);
  white-space: nowrap;
  padding: 3px;
  border: 1px solid black;
}

.box span {
  background:linear-gradient(90deg,#000 calc(var(--d) + 3px),red 0); /* we need to account for the padding */
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
<div class="box"><span>Text will for sure overflow</span></div>

<div class="box" style="--d:80px"><span>Text will for sure overflow</span></div>

user_86203330

You can use two div to overlap on one another and hide the div behind with a background color.

.wrapper {
  position: relative;
}

.firstDiv {
  position: absolute;
  overflow: hidden;
  width: 20px;
  white-space: nowrap;
  z-index: 1;
  border: 0.5px solid black;
  background: white;
}

.secondDiv {
  position: absolute;
  color: red;
  padding-top: 1px;
  padding-left: 3px;
}
<div class='wrapper'>
  <div class='firstDiv'>Hello</div>
  <div class='secondDiv'>Hello</div>
</div>

user_147641880

You can achieve this by using -webkit-background-clip: text and linear-gradient. For that you have to wrap the text in a container with the background properties and make the target text transparent. Define the linear gradient as follows for being black for the same width like the text has (here 100px) and the rest being red:

background-image: linear-gradient(to right, black 100px, black 1%, red 1%);

Working example:

* {
  box-sizing: border-box;
}

div {
  background-image: linear-gradient(to right, black 100px, black 1%, red 1%);
  -webkit-background-clip: text;
}

p {
  max-width: 100px;
  border: 1px solid black;
  white-space: nowrap;
  overflow: visible; 
  color: transparent;
}
<div>
  <p>Text will for sure overflow</p>
</div>

user_153773550
Related