Wie kann ich überprüfen, ob Line-Clamp aktiviert ist?

Ich habe einen dynamischen Text in einer Spanne. Ich möchte verwenden line-clamp: 2.

In diesem Fall sind es max. 2 Zeilen Text und der Rest wird abgeschnitten ….

Das funktioniert mit:

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

Mein Problem: Wenn der Inhalt abgeschnitten ist, sollte ein Tooltip angezeigt werden. Wie kann ich erkennen, ob der Text eingeklemmt ist?

Die Höhe des Elements ist gleich, innerHTML ist das gleiche… Ich habe keine weitere Ahnung…

CSS erkennen line-clamp von Javascript kann durch Vergleich der gemacht werden scrollHeight und das clientHeight des „eingespannten“ Elements.

Die „wahre“ Höhe des Elements wird durch abgeschnitten overflow: hidden CSS-Eigenschaft, sondern die DOM-Eigenschaft scrollHeight Werde das melden vollständige Höhewährend clientHeight berichtet das gerendert Höhe.

Das folgende Beispiel zeigt einen geklemmten Text.
Versuchen schwebend um zu sehen, ob die Erkennung protokolliert wurde. (Text kann bearbeitet werden)

const isTextClamped = elm => elm.scrollHeight > elm.clientHeight

const onMouseEnter = elm => {
  console.clear()
  console.log( isTextClamped(elm) )
}

p {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: both; /* allowing resize for this demo only */
}

<p contenteditable spellcheck="false" onmouseenter="onMouseEnter(this)">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</p>

👉 Hier ist ein Codepen was dies live veranschaulicht

Sie können überprüfen, ob scrollHeight die clientHeight überschreitet:

function multiLineOverflows() {
    const el = this._element.nativeElement;
    return el.scrollHeight > el.clientHeight;
}

Eine einfache Lösung basierend auf getClientRects().length, die für mich funktioniert.

$('.text-inline').each(function() {
  var textLineCount = $(this)[0].getClientRects().length;
  var lineClampValue = $(this).parent().css('-webkit-line-clamp');
  if (textLineCount > lineClampValue) {
    $(this).parent().addClass('cut');
  }
});

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

.text-block.expand {
  -webkit-line-clamp: initial;
}

.show-text {
  display: none;
}

.cut+.show-text {
  display: initial;
}

.expand+.show-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="text-block">
  <span class="text-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore   magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
<button class="show-text" onclick="$(this).prev().addClass('expand')">Read more</button>

Hier ist eine Lösung für NextJS, React, Typescript und Tailwind, einschließlich einer Schaltfläche für „Weiterlesen…“, die erscheint, wenn Text eingeklemmt wird.

Eine Beschreibung vor dem Code:

Dies ist eine Reaktionskomponente, die als Requisite gepostet wird (könnte auch alles andere sein). Der Beitrag enthält Inhalte, die wir anzeigen sollen, mit einer Länge von 4 Zeilen, bis der Benutzer auf „Weiterlesen…“ klickt.

Die Inhaltsreferenz (useRef-Hook) enthält eine Referenz auf das Inhalts-Div, in dem der Inhalt angezeigt werden soll. Der erste useState-Hook hält den Status isClamped: true, wenn der Inhalt geklemmt ist, andernfalls false. Der zweite useState enthält den Status isExpanded: true, wenn der Benutzer auf „Weiterlesen…“ geklickt hat, andernfalls false. Dann fügt der useEffect-Hook, der aufgrund des leeren Arrays nur beim Mounten aufgerufen wird, einen Ereignis-Listener zur Fenstergröße hinzu (was sich auf die Anzahl der Zeilen des Inhalts auswirken kann). Wenn die Größe des Fensters geändert wird, wird contentRef (div with content) scrollHeight mit clientHeight verglichen, genau wie in den anderen Antworten oben. Wenn scrollHeight größer ist, wird isClamped auf true gesetzt, andernfalls auf false.

Wenn isExpanded nun im Div, das den Inhalt enthält, den Wert „false“ hat (der Benutzer hat nicht auf „Weiterlesen …“ geklickt), wird „className“ auf „line-clamp-4“ gesetzt (wodurch der Inhalt auf 4 Zeilen begrenzt wird). ), andernfalls wird className auf „line-clamp-none“ (keine Klammer) gesetzt.

Schließlich wird in dem Div, das „Weiterlesen…“ enthält, angezeigt, ob isClamped wahr ist (also der Text geklemmt ist).

import {useState, useRef, useEffect}

interface PostItemProps {
      post: Post
}

export default function PostItem({post}: PostItemProps){
    
  const contentRef = useRef<HTMLDivElement>(null)
  const [isClamped, setClamped] = useState(false)
  const [isExpanded, setExpanded] = useState(false)

  useEffect(() => {
    // Function that should be called on window resize
    function handleResize() {
      if (contentRef && contentRef.current) {
        setClamped(
          contentRef.current.scrollHeight > contentRef.current.clientHeight
        )
      }
    }

    // Add event listener to window resize
    window.addEventListener('resize', handleResize)

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize)
  }, []) // Empty array ensures that it would only run on mount

return (
    <div>
     <div ref={contentRef} className={`${ !exapnded ? 'line-clamp-4' : 'line-clamp-none' }> {post.content} </div>
     </div>
       {isClamped && (
          <div className="flex justify-end">
            <button
              className="font-bold text-title"
              onClick={() => setExpanded(true)}
            >
              See More...
            </button>
          </div>
        )}
    </div>
 )
}