TruncateText

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Truncate Text';
}

styles.app\.css

html {
  font-size: 16px;
}

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1rem;
}

.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

templates.application\.hbs

{{#let "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime ducimus quibusdam quidem ipsa magni iste doloribus sit sapiente. Vitae consequuntur a asperiores alias quod vero debitis, quis impedit enim pariatur." as |lorem|}}
  <div class="grid gap-6">
    <div>
      <h4>Not truncated</h4>
      <p><TruncateText @text="Hello World" /></p>
    </div>

    <div>
      <h4>Single line</h4>
      <p><TruncateText @text={{lorem}} /></p>
    </div>

    <div>
      <h4>Multiple lines (2)</h4>
      <p><TruncateText @text={{lorem}} @numLines="2" /></p>
    </div>

    <div>
      <h4>Multiple lines (3)</h4>
      <p><TruncateText @text={{lorem}} @numLines="3" /></p>
    </div>

    <div>
      <h4>Multiple lines (4)</h4>
      <p><TruncateText @text={{lorem}} @numLines="4" /></p>
    </div>

    <div>
      <h4>Multiple lines (5)</h4>
      <p><TruncateText @text={{lorem}} @numLines="5" /></p>
    </div>

    <div>
      <h4>Wiggle room</h4>
      <p><TruncateText @text={{lorem}} @numLines="3" @wiggleRoom="2" /></p>
    </div>
  </div>
{{/let}}

truncate-text.component\.js

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class TruncateTextComponent extends Component {
  @tracked hasTextOverflow;

  get numLines() {
    return parseInt(this.args.numLines ?? 1, 10);
  }

  get maxLines() {
    return this.numLines + this.wiggleRoom;
  }

  get wiggleRoom() {
    return parseInt(this.args.wiggleRoom ?? 0, 10);
  }

  @action
  onDidInsert(element) {
    this.resizeObserver(element);
  }

  @action
  willTextOverflow(element) {
    let { scrollHeight, clientHeight } = element;
    let hasTextOverflow = scrollHeight !== clientHeight;
    console.log(hasTextOverflow, scrollHeight, clientHeight);
    return hasTextOverflow;
  }

  @action
  resizeObserver(element) {
    let ro = new ResizeObserver((entries) => {
      for (let entry of entries) {
        this.hasTextOverflow = this.willTextOverflow(entry.target);
      }
    });
    
    ro.observe(element);
  }
}

truncate-text.template\.hbs

<span
  class="clamp-{{this.maxLines}}"
  {{did-insert this.onDidInsert}}
>  
  {{@text}}
</span>

{{#if this.hasTextOverflow}}
  <p>Has text overflow</p>
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "@ember/render-modifiers": "1.0.2"
  }
}