按行反应截断文本
React truncate text by line
我需要用 React 截断卡片标题(文本)。
我尝试使用 dotdotdot 组件 https://www.npmjs.com/package/react-dotdotdot 但它不适用于简单组件。
const content = ({title}) => <Dotdotdot clamp={2}><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est rem magni totam quos sapiente aliquid praesentium quae sint illo quas dicta cum illum dolorum quis eveniet, corrupti porro placeat, consequatur reprehenderit aliquam distinctio voluptates voluptate, temporibus omnis. Cum quis tenetur laborum minus accusantium provident eveniet, corrupti, reiciendis aliquam suscipit hic?</p></Dotdotdot>
在 ie11 和 mozilla 中不起作用。
在 -web-kit
中我有 -webkit-line-clamp
但在 mozilla 中它不起作用。
有人知道这个任务的决定吗?
我不知道您是希望该问题得到解决还是要求其他选项。
但我通常用react-lines-ellipsis来表示省略号。
如果您可以使用其他替代方案,那么您也可以在其他浏览器中查看 demo。
您可以安装 react-text-truncate 并使用下面的代码来完成
<TextTruncate
line={1}
text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
}
/>
或者您可以访问 demo page
这适用于单行
function TruncatedLine({ text }: { text: string }) {
return (
<span style={{ position: "relative", display: "block" }}>
<span style={{ color: "transparent" }}>X</span>
<span
style={{
display: "block",
position: "absolute",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
top: 0,
}}
>
{text}
</span>
</span>
);
}
组件会自动适应父级宽度
<div style={{width: "50%"}}><TruncatedLine text="very long multiline text"/></div>
我需要用 React 截断卡片标题(文本)。
我尝试使用 dotdotdot 组件 https://www.npmjs.com/package/react-dotdotdot 但它不适用于简单组件。
const content = ({title}) => <Dotdotdot clamp={2}><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est rem magni totam quos sapiente aliquid praesentium quae sint illo quas dicta cum illum dolorum quis eveniet, corrupti porro placeat, consequatur reprehenderit aliquam distinctio voluptates voluptate, temporibus omnis. Cum quis tenetur laborum minus accusantium provident eveniet, corrupti, reiciendis aliquam suscipit hic?</p></Dotdotdot>
在 ie11 和 mozilla 中不起作用。
在 -web-kit
中我有 -webkit-line-clamp
但在 mozilla 中它不起作用。
有人知道这个任务的决定吗?
我不知道您是希望该问题得到解决还是要求其他选项。
但我通常用react-lines-ellipsis来表示省略号。 如果您可以使用其他替代方案,那么您也可以在其他浏览器中查看 demo。
您可以安装 react-text-truncate 并使用下面的代码来完成
<TextTruncate
line={1}
text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
}
/>
或者您可以访问 demo page
这适用于单行
function TruncatedLine({ text }: { text: string }) {
return (
<span style={{ position: "relative", display: "block" }}>
<span style={{ color: "transparent" }}>X</span>
<span
style={{
display: "block",
position: "absolute",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
top: 0,
}}
>
{text}
</span>
</span>
);
}
组件会自动适应父级宽度
<div style={{width: "50%"}}><TruncatedLine text="very long multiline text"/></div>