Truncate Text

Free

Truncated text is shortened content, limits the number of lines and adds "..." to show there's more or due to space limits.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tristique est. Nulla id bibendum sapien. Pellentesque ac sodales erat. Donec eget arcu in sapien lacinia congue. Fusce volutpat accumsan nibh eget pellentesque. Phasellus orci est, elementum eget vulputate vitae, pretium eu ipsum. Fusce ullamcorper sit amet quam id faucibus. Nullam sed massa pellentesque, fermentum lacus non, auctor lacus. Integer ipsum est, vestibulum sit amet libero sed, auctor sodales leo. Aliquam eget dui id erat volutpat scelerisque id ut nisl. Duis placerat blandit ipsum. Sed lectus mauris, ullamcorper vel augue at, euismod egestas sapien. Quisque consequat nisl ex, cursus imperdiet tortor commodo non.

How to use

  1. Create a new code override file in Framer.

  2. Inside the newly created override file, replace the override logic with this code.

    import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
// Learn more: https://www.framer.com/docs/guides/overrides/

const useStore = createStore({
    background: "#0099FF",
})
// define no of lines after you want to truncate
const LINES = 4
export default function withLineTruncate(Component): ComponentType {
    return (props) => {
        const styles = {
            ...props?.style,
            WebkitLineClamp: `${LINES}`,
            WebkitBoxOrient: "vertical",
            textOverflow: "ellipsis",
            display: "-webkit-box",
            overflow: "hidden",
        }
        return (
            <>
                <Component {...props} style={styles} />
            </>
        )
    }
}


  3. Apply the code override to text layer which you want to truncate.