inline-block / ellipsis

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

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
Copyright rewindme ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



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



/*Downloaded from */
.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;