Как сделать чтобы текст уходил за границу div слева

div { 
  width: 200px; 
  height: 20px; 
  border: 1px solid red; 
  position: relative; 
  overflow: hidden; 
} 
 
span { 
  position: absolute; 
  top: 0; 
  right: 0; 
  white-space: nowrap; 
}

<div> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
</div>

div { 
  width: 500px; 
  height: 20px; 
  border: 1px solid red; 
  position: relative; 
  overflow: hidden; 
} 
 
div::before, 
div::after { 
  content: '...'; 
  position: absolute; 
  background-color: white; 
  height: 100%; 
  z-index: 2; 
} 
 
div::after { 
  right: 0; 
} 
 
div span:nth-child(1) { 
  position: absolute; 
  top: 0; 
  right: 51%; 
  white-space: nowrap; 
} 
 
div span:nth-child(2) { 
  position: absolute; 
  top: 0; 
  left: 51%; 
  white-space: nowrap; 
}

<div> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, porro!</span> 
</div>