inline-block / ellipsis

In this example below you will see how to do a inline-block / ellipsis with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rewindme, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rewindme ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>inline-block / ellipsis</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="cover">
    <div class="ellipsis">말줄임이 되어야 합니다.말줄임이 되어야 합니다.</div>
    <span class="ico">아이콘</span>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/rewindme/inline-block-ellipsis-JbmoPv */
.container {
  width: 200px;
}
.cover {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
}

.ico {
  position: absolute;
  left: 100%;  
  white-space: nowrap;
}

Comments