CodePen

HTML

            
              <style>.clip { text-overflow: clip; }</style>
<p class="overflow clip">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.ellipsis { text-overflow: ellipsis; }</style>
<p class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.word { text-overflow: ellipsis-word; }</style>
<p class="overflow word">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.text { text-overflow: "---"; }</style>
<p class="overflow text">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>

<style>.double { text-overflow: ellipsis ellipsis; text-align: center; }</style>
<p class="overflow double">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .overflow {
  	width: 10em;
  outline: 1px solid #000;
  margin: 0 0 2em 0;
  
  /**
   * Required properties to achieve text-overflow
   */
	  white-space: nowrap;
  	overflow: hidden;
}

body style {
  display: block;
  font: 14px monospace;
  padding: 3px;
  margin: 0 0 5px 0;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................