How to allow text or divs to overlap eachother CSS?

Question

I'm working on this multiplayer webgame. I'm encountering an issue where if the text is too long, it'll force the green text on the right to move to the next line. How would I make it so they overlap, or do anything else, so the text does not move to the next line. Thanks so much.

Could you include some code as a [mcve] that illustrates the issue? — Alexander Nied, Feb 07 '21 at 02:15

score 2 · Answer 1 · answered Feb 07 '21 at 02:52

2

I guess you want the text one line so that when text going to the max length it will something that the user able to understand. you may see the below snippet for example you can use the big word as max-length with nowrap and title attribute for tooltip big word.

div{
  width: 200px;
  background: red;
  color: white;
  height: 200px;
}
div span:first-child{
  max-width: 160px;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: top;
  
}

   <div> <span title="EEEEEEEEEEEEEEEEEEEE(4505mi)"> EEEEEEEEEEEEEEEEEEEE(4505mi) </span> <span> 225 </span> </div>

answered Feb 07 '21 at 02:52

NIKHIL CHANDRA ROY

807
11
16

This is great thank you. However, if I get rid of the max-width, and the text collides with the number div, on the right of the square.. the text will move over to the next line, as shown in the video. Is there any css property that allows the collision of these divs and lets it happen without that div moving to the next line? Thanks – Paul McBurney Feb 07 '21 at 07:35
just use display: flex in div. so it's not going to two-line. – NIKHIL CHANDRA ROY Feb 07 '21 at 09:14

Dulani Maheshi · Answer 2 · 2021-02-07T03:33:50.227

You can use inline-block for that.

These links may help you.

inline-block doesn't work as expected with long content?

How to align two elements on the same line without changing HTML

Display Elements on Same Line

With the help of below example, you can see the difference between block , inline and inline-block.

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>
</head>
<body>

<h1>The display Property</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

How to allow text or divs to overlap eachother CSS?

2 Answers2