-3

I want to fit span background-color to text size in parent container. The problem is the container already have css properties. I can make some change but this properties are parsed dynamicaly.

For now it's like this:

enter image description here

It need to be like this:

Imgur

I already tried methods from How do I set the background color of targeted text only, using only CSS? but non of this works becouse of css properties from parent element 

<div>
  <span>  
The Last Will and Testament of
Eric Jones dsamd kaldmlsakd msalkd maslk dmaslkd maskld msalkd amsdlk asmdlk asmdkl asmd klsam dlkask dasmd lksamd lkasmd lskadm lksad mlsakd mlsak
  </span>
</div>

div{
  top: 10px; 
  left: 10px; 
  width: 450px; 
  height: 180px;
  font-family: arial;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: #000000;
  text-transform: none;
  border-color: #FFF000;
  border-width: 1px;
  border-style: dotted;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEX/AAAZ4gk3AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC);
  background-color: #ff0000;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  overflow: hidden;
  position: absolute;
  display: flex;
}
span{
    background-color:blue;
    display: block;
}

https://jsfiddle.net/Shinen/jom70fv6/34/

Maybe there is a way to make changes in span style to make it work?

Best wishes :)

SOLUTION

The soultion what i found is to put span into another container. Maybe someone have better idea? https://jsfiddle.net/Shinen/jom70fv6/37/

Sylwester Karpiuk
  • 11
  • 1

2 Answers2

0
span {
    width: min-content;
}

Setting the width of the span tag to min-content worked for me.

Piotr Henryk Dabrowski
  • 702
  • 5
  • 13
durjoy
  • 1
  • 1
-1

this is my working example

the code is here:

 div{
  top: 10px; 
  left: 10px; 
  width: 450px; 
  height: 180px;
  font-family: arial;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  color: #000000;
  text-transform: none;
  border-color: #FFF000;
  border-width: 1px;
  border-style: dotted;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEX/AAAZ4gk3AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC);
  background-color: #ff0000;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  overflow: hidden;
  position: absolute;
  display: flex;
}
span {
  background-color: blue; 
}
p{
  text-align: justify;
}

HTML:

<div>
<p><span>The Last Will and Testament of
Eric Jones dsamd kaldmlsakd msalkd maslk dmaslkd maskld msalkd amsdlk asmdlk asmdkl asmd klsam dlkask dasmd lksamd lkasmd lskadm lksad mlsakd mlsak
</span></p>
</div>

Update: I just fixed the whole code, justified the text (just like in the image) and change the color to blue.

Shiz
  • 695
  • 10
  • 27