yuanqing/line-clamp

Adding via CDN?

dsomel21 opened this issue · 3 comments

dsomel21 commented

Sorry if this sounds kind of stupid, I should know the answer, but how do I go about adding something like this into a non Node application?

Suppose I just had raw HTML page... is there a way I can just download minified version or have some kind of CDN to reference?

dsomel21 commented

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.

  1. It doesn't give the effect that I am looking for (I want it to ... after it exceeds 3 lines.
  2. 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:

image

What I want:

image

yuanqing commented

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>

However, I would recommend that you use a build tool or bundler eg. Webpack or Browserify

dsomel21 commented

We are in a Rails app! @yuanqing