Skip to content

break line on my element is messed up because there is strong in it #86

@inmco

Description

@inmco

Please help me solve this problem @lukePeavey , I am not yet proficient in developing a website, but I want to try to learn it.

default text

Image

Result

Image

import * as React from "react"
import { Override } from "framer"
import SplitType from "split-type"

export function Split(): Override {
    const textRef = React.useRef(null)

    React.useEffect(() => {
        const textElement = textRef.current

        // Pilih elemen yang akan di-split
        const paragraphs = textElement.querySelectorAll(
            "h1, h2, h3, h4, h5, h6, p"
        )

        // Lakukan split menggunakan SplitType
        const splitText = new SplitType(paragraphs, {
            types: "lines, words, chars",
            tagName: "span",
        })

        // Tambahkan styling langsung melalui JavaScript
        const lineElements = textElement.querySelectorAll(".line")
        lineElements.forEach((line) => {
            line.style.overflow = "hidden"
            line.style.fontKerning = "none"
        })
    }, [])

    return { ref: textRef }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions