html - Inverting a div render in CSS -

i have 2 divs, 1 white background, 1 black background:

<style> #leftside { float:left; width:50%; height:100%; background:#fff; } #rightside { float:right; width:50%; height:100%; background:#000; } 

<div id="leftside">  </div> <div id="rightside">  </div> 

what wish write text goes on both of divs has inverted color depending on div letter's pixel over.

something like

i <span> , set letter's color doesn't handle situation when single letter on both divs.

anything do? (if possible i'd not down css chrome 47 , firefox 43 support).

you can not without ugly hacky code.

make 2 elements 2 texts overlapping each other hidden on other element. better explained example.

check out jsfiddle.

<div class="wrapper">    <div id="left">      <span>this long sentence test.</span>    </div>   <div id="right">      <span>this long sentence test.</span>    </div> </div> 

-

body {   background: #cacaca; } .wrapper {   width: 300px;   height: 150px;   position: relative;   }   .wrapper span {     width: 300px;     position: absolute;     text-align: center;     top: 50%;     left: 0;     transform: translatey(-50%);   }   .wrapper #left {     width: 50%;     height: 150px;     background: #ffffff;     display: inline-block;     color: #000000;     position: relative;   }   .wrapper #right {     width: 50%;     height: 150px;     background: #000000;     display: inline-block;     margin-left: -4px;     color: #ffffff;     position: relative;     overflow: hidden;   }   .wrapper #right span {     left: -150px;   } 

https://jsfiddle.net/66t8zf9s/