The first DIV has a fixed height and width and no overflow property set, so the content spills outside the container.
The second DIV has overflow set to hidden and the extra text is not shown but the last line is partly obscured.
The third DIV uses my jQuery plugin to remove any text that does not fully fit in within the container. It also adds "..." to indicate the text was truncated.
The fourth DIV also uses my plugin but replaces adds a hyperlink to read more when the truncation is applied.
Return to article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque turpis eu feugiat hendrerit. Aliquam porta mauris ut arcu molestie dictum. Integer varius tellus ac mi finibus, ut dignissim lectus tempus. Nam magna turpis, pharetra eget blandit a, volutpat eget eros. Pellentesque a tortor ut lacus posuere rutrum eget vel sem. Aenean id mi porta, aliquet massa eu, vehicula massa. Duis et vulputate velit, in aliquam est. Sed porta quam odio, ac lobortis nunc tempor at. Aliquam eu justo erat. Fusce sed accumsan magna, quis lobortis justo. In in leo laoreet, pellentesque turpis non, sollicitudin erat. Vivamus nibh tortor, pharetra ac nibh quis, convallis consectetur lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque turpis eu feugiat hendrerit. Aliquam porta mauris ut arcu molestie dictum. Integer varius tellus ac mi finibus, ut dignissim lectus tempus. Nam magna turpis, pharetra eget blandit a, volutpat eget eros. Pellentesque a tortor ut lacus posuere rutrum eget vel sem. Aenean id mi porta, aliquet massa eu, vehicula massa. Duis et vulputate velit, in aliquam est. Sed porta quam odio, ac lobortis nunc tempor at. Aliquam eu justo erat. Fusce sed accumsan magna, quis lobortis justo. In in leo laoreet, pellentesque turpis non, sollicitudin erat. Vivamus nibh tortor, pharetra ac nibh quis, convallis consectetur lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque turpis eu feugiat hendrerit. Aliquam porta mauris ut arcu molestie dictum. Integer varius tellus ac mi finibus, ut dignissim lectus tempus. Nam magna turpis, pharetra eget blandit a, volutpat eget eros. Pellentesque a tortor ut lacus posuere rutrum eget vel sem. Aenean id mi porta, aliquet massa eu, vehicula massa. Duis et vulputate velit, in aliquam est. Sed porta quam odio, ac lobortis nunc tempor at. Aliquam eu justo erat. Fusce sed accumsan magna, quis lobortis justo. In in leo laoreet, pellentesque turpis non, sollicitudin erat. Vivamus nibh tortor, pharetra ac nibh quis, convallis consectetur lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque turpis eu feugiat hendrerit. Aliquam porta mauris ut arcu molestie dictum. Integer varius tellus ac mi finibus, ut dignissim lectus tempus. Nam magna turpis, pharetra eget blandit a, volutpat eget eros. Pellentesque a tortor ut lacus posuere rutrum eget vel sem. Aenean id mi porta, aliquet massa eu, vehicula massa. Duis et vulputate velit, in aliquam est. Sed porta quam odio, ac lobortis nunc tempor at. Aliquam eu justo erat. Fusce sed accumsan magna, quis lobortis justo. In in leo laoreet, pellentesque turpis non, sollicitudin erat. Vivamus nibh tortor, pharetra ac nibh quis, convallis consectetur lorem.