{"id":137273,"date":"2024-10-15T15:12:25","date_gmt":"2024-10-15T09:42:25","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137273"},"modified":"2024-10-17T15:06:32","modified_gmt":"2024-10-17T09:36:32","slug":"truncating-text-in-css-advanced-techniques","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/truncating-text-in-css-advanced-techniques\/","title":{"rendered":"Truncating Text in CSS | Advanced Techniques"},"content":{"rendered":"\n

Truncating text<\/strong> means cutting off text at a certain point and replacing the remaining part with an ellipsis (…). This is often used to prevent text from overflowing its container, especially in responsive designs where the available space might vary.<\/p>\n\n\n\n

Techniques for Truncating Text<\/p>\n\n\n\n

    \n
  1. Overflow Property:<\/strong>
    \u2022 Set the overflow property of the container element to hidden.
    \u2022 Ensure the container has a fixed width or height.
    \u2022 Set the text-overflow property of the container element to ellipsis.

    CSS
    .truncated-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; \/* Optional: Prevent wrapping *\/ }<\/li>\n\n\n\n
  2. Line-Clamp Property:<\/strong>
    \u2022 Use the line-clamp property to specify the maximum number of lines of text to display.
    \u2022 Combine with overflow: hidden and text-overflow: ellipsis for truncation.

    CSS
    .truncated-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; \/* For Webkit-based browsers *\/
        -webkit-line-clamp: 2; \/* Adjust the number of lines *\/
        line-clamp: 2; \/* Standard syntax *\/ }<\/li>\n\n\n\n
  3. JavaScript-Based Solutions:<\/strong>
    \u2022 Use JavaScript to dynamically check the length of the text and truncate it if necessary.
    \u2022 This approach offers more flexibility but can be more complex.<\/li>\n<\/ol>\n\n\n\n

    Responsive Design Considerations<\/p>\n\n\n\n