[Vuejs]-Show Read Only/Hide Button only when the content is over two lines

by

0👍

As you said- "I just want to show it in case there’s a line clamp that is superior to 2."
I understood it as you want to show the read_more/hide button only if the text clamp is more than 2.

So, to do this, you can check these two conditions-

scroll height == client height (Text is fully rendered)
scroll height > client height (Text is clamped)

Here is the working demo which will work like this-

The procedure is-

  1. By default, the line-clamp: 2 property will be applied to the text.
  2. The read_more/hide buttons will only be visible if the text inside the paragraph is more than two lines, and you can show/hide the content.
  3. There are three buttons in the demo to change the text to one line, two lines, and three lines, so you can toggle between them and see the result.

The technical part is-

  1. I created a data property named hide_btns to hide both buttons (read_more/hide) if text clamped is less than 2.
  2. Then, I created a method named, checkIfElClamped that will examine the text clamped length and toggle the data property hide_btns accordingly.
  3. I used a watcher hook as well to keep an eye on the text, and when the text changes, it calls the same method checkIfElClamped to take action again the text clamping.
p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: both; /* allowing resize for this demo only */
}
<html>
  <div id="app">
    <div>
      <button @click="clampToOne()">One line content</button>
      <button @click="clampToTwo()">Two line content</button>
      <button @click="clampToMore()">More than two line</button>

      <p class="multiline" :style="styleObj">
        {{ content }}
      </p>
      
      <div v-if="!hide_btns">
        <button
          v-show="!readmore"
          @click="changeLineclamp()"
          link
          class="text-white p-0"
          size="sm"
        >
          Read more
        </button>
        <button
          v-show="readmore"
          @click="hideContent()"
          link
          class="text-white p-0"
          size="sm"
        >
          Hide
        </button>
      </div>
    </div>
  </div>

  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://unpkg.com/vue@2"></script>
  <script>
    new Vue({
      el: "#app", //Tells Vue to render in HTML element with id "app"
      data() {
        return {
          lineclamp: 2,
          readmore: false,
          content: null,
          hide_btns: false
        };
      },

      watch: {
        content: {
         immediate: true, // to trigger upon creation
         handler(newVal) {
          this.checkIfElClamped();
         }
        },  
      },

      methods: {
        checkIfElClamped() {
          // to reset the line clamp and read more button state
          this.hideContent();
          
          this.$nextTick(() => {
            let el = document.querySelector(".multiline");
            if(el) {
              this.hide_btns = el.scrollHeight === el.clientHeight; 
            }
          });
        },

        hideButton() {
          if (this.computedLineclamp) {
            this.readmore = true;
          }
        },

        changeLineclamp() {
          this.lineclamp = "initial";
          this.readmore = true;
          this.showButton = false;
        },

        hideContent() {
          this.lineclamp = 2;
          this.readmore = false;
        },

        clampToOne() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
        },

        clampToTwo() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
        },

        clampToMore() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting";
        }
      },
      
      computed: {
        computedLineclamp() {
          return this.lineclamp;
        },

        styleObj() {
          return {
            color: "red",
            "line-clamp": this.computedLineclamp + "!important",
            "-webkit-line-clamp": this.computedLineclamp + "!important"
          };
        }
      }
    });
  </script>
</html>

Leave a comment