Sorry if this sounds kind of stupid, I should know the answer, but how do I go about a

You can do something like: <div class="highlight highlight-text-html-basic notrans

We are in a Rails app! <a class="user-mention notranslate" data-hovercard-type="user"

Adding via CDN? about line-clamp HOT 3 CLOSED

dsomel21 commented on June 3, 2024

Adding via CDN?

from line-clamp.

Comments (3)

dsomel21 commented on June 3, 2024

I ended up figuring out a way. I replaced the module.exports = with const lineClamp =

As such:


  var lineClamp = function (rootElement, lineCount, options) {
    rootElement.style.cssText +=
      'overflow:hidden;overflow-wrap:break-word;word-wrap:break-word'

    var maximumHeight =
      (lineCount || 1) *
      parseInt(window.getComputedStyle(rootElement).lineHeight, 10)

    // Exit if text does not overflow `rootElement`.
    if (rootElement.scrollHeight <= maximumHeight) {
      return false
    }

    return truncateElementNode(
      rootElement,
      rootElement,
      maximumHeight,
      (options && options.ellipsis) || ELLIPSIS_CHARACTER
    )
  }

  // End of ellipsis
  
  // var forEach = Array.prototype.forEach;
  // var recipeNameContainers = document.getElementsByClassName('recipe-name-container');
  // forEach.call(recipeNameContainers, function(recipeName) {
  //   lineClamp(recipeName, 3)
  // });

However, I am not sure if I am going to be taking this route.

It doesn't give the effect that I am looking for (I want it to ... after it exceeds 3 lines.
It makes the page load very, very slow

For example. (Red is the recipe-name-container. It is fixed at 96px high at 75% width). Here are the results:

What I want:

from line-clamp.

yuanqing commented on June 3, 2024

You can do something like:

<body>
  <div class="line-clamp">
    Lorem ipsum dolor sit amet, <strong>consectetur adipiscing</strong> elit.
  </div>
  <script src="https://bundle.run/line-clamp"></script>
  <script>
    // `lineClamp` is available in this `script` block
    const element = document.querySelector('.line-clamp')
    lineClamp(element, 3)
  </script>
</body>