Allow truncated text with content inside the last tag

README.md

@@ -293,6 +293,14 @@ const ReadMoreNative: React.FC<ReadMoreNativeProps> = ({
 export default ReadMoreNative;
 ```
 
+### Truncated text with content inside the last tag
+
+You can define the text to show after a truncated text inside the last tag (instead of outside it) with the `endTruncate` property.
+
+For example, if the truncated text ends with a link, and you define `endTruncate="..."`, the truncated link will end with `...` as part of the link, instead of outside it.
+
+See section `Truncated text with content inside the last tag` in the demo.
+
 ### Demos
 
 You can see a live web (react-dom) demo [here](https://lucasbasquerotto.github.io/react-read-more) and a react-native demo [here](https://snack.expo.dev/@lucasbasquerotto/react-shorten).

examples/src/app.tsx

@@ -4,12 +4,14 @@ import React from 'react';
 
 const StyledReadMore: React.FC<{
 	truncate?: number;
+	endTruncate?: string;
 	children: React.ReactNode;
-}> = ({ truncate, children }) => (
+}> = ({ truncate, endTruncate, children }) => (
 	<ReadMoreWeb
 		truncate={truncate}
 		showMoreText="Show more"
 		showLessText="Show less"
+		endTruncate={endTruncate}
 		className="read-more-btn"
 	>
 		{children}
@@ -128,6 +130,26 @@ export default function App() {
 				</div>
 			</div>
 
+			<div className="section" data-testid="end-truncate">
+				<h2 className="title">
+					Truncated text with content inside the last tag
+				</h2>
+
+				<div className="content">
+					<StyledReadMore truncate={110} endTruncate="...">
+						Lorem ipsum dolor sit amet,{' '}
+						<a href="http://localhost:3000" className="link">
+							consectetur adipiscing elit. Sed ullamcorper, odio eu aliquam
+							ultricies, enim sapien aliquet arcu, quis aliquam diam massa eu
+							nisl. Sed vitae nunc eget nunc ullamcorper aliquet.
+						</a>{' '}
+						Sed euismod, nisl eget aliquam ultricies, justo nisl aliquet nunc,
+						quis aliquam diam massa eu nisl. Sed vitae nunc eget nunc
+						ullamcorper aliquet.
+					</StyledReadMore>
+				</div>
+			</div>
+
 			<div className="section" data-testid="link-text">
 				<h2 className="title">Different character limits</h2>
 

src/components/read-more-web.tsx

@@ -34,7 +34,7 @@ export const ReadMoreWeb: React.FC<ReadMoreWebProps> = ({
 			expanded={expanded}
 			showMore={
 				<>
-					{'... '}
+					{endTruncate ? undefined : '... '}
 					<button onClick={onShowMore} className={className} style={style}>
 						{showMoreText ?? 'Show more'}
 					</button>

src/components/read-more.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 interface ParseResult {
 	content: React.ReactNode | React.ReactNode[];
 	remaining: number;
-	endTruncate: string;
+	endTruncate?: string;
 }
 
 type Parse = (root: ParseResult, parse: Parse) => ParseResult;