我正在尝试使用多行文本字段构建组件。如果输入的文本超过2行,那么我想添加省略号(...),以防止文本溢出。
如何仅通过操纵css以仅在显示中显示省略号而不修改将要存储的实际文本以包含“ ...”来实现此目的?
我正在使用这个React组件link
谢谢
答案 0 :(得分:2)
我只是想出了如何解决React的问题。
正如科多(Khodor)所述,线夹就是您想要的。但是,官方CSS规范目前不支持该功能。因此,您可以使用-webkit-line-clamp作为一种解决方法。但是,我很难弄清React所需的确切语法。我最终通过查看此NPM软件包react-lines-ellipses的源代码并在他的github存储库中搜索“ webkit”来弄清楚了。
const textStyle = {
maxWidth: '100%',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
overflow: 'hidden',
textOverflow: 'ellipsis',
};
我设置maxWidth
以确保文本填充显示元素的整个宽度。这是可选的。
overflow: 'hidden'
隐藏了3行之外的多余文本(我随机选择了3行)。
textOverflow: 'ellipses'
在行的末尾添加一个省略号(...)。
<div
onClick={toggleTruncate}
style={calculateTextStyle()}
>
This is where my long text goes.
</div>
// This function returns the correct style to the above div.
function calculateTextStyle() {
return truncate ? textStyle : null;
}
// I used React Hooks to create a variable in state to manage if the text should be truncated or not.
const [truncate, setToggleTruncate] = React.useState(true);
// This function toggles the state variable 'truncate', thereby expanding and truncating the text every time the user clicks the div.
function toggleTruncate() {
setToggleTruncate(!truncate);
}
答案 1 :(得分:1)
仅对于CSS,您可以使用换行器,尽管它没有最好的browser support
选中此codepen进行实施。
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
答案 2 :(得分:0)
与此相关的javascript如下所示。取值,将其分成几行,如果有多行,则将以下几行括在括号中。
您使用的React组件似乎带有onChange
道具,该道具可以使用类似的功能。
const textAreaElement = document.getElementById('t')
textAreaElement.addEventListener('keyup', () => {
const value = textAreaElement.value.replace(/[\(\)]/g, '')
const splitLines = value.split(/(?:\r\n|\r|\n)/)
const newValue = splitLines.length > 1 ?
`${splitLines[0]}\n(${splitLines.slice(1, splitLines.length).join('\n')})` : splitLines[0]
textAreaElement.value = newValue;
});
<textarea id="t"></textarea>
答案 3 :(得分:0)
使用多行省略号的简单实现将使用antd typography component。您可以提供一个称为省略号的道具,该道具的行数应在其后被截断。
<Paragraph ellipsis={{ rows: 3, expandable: true }}>
Ant Design, a design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by Ant UED Team.
Ant Design, a design language for background applications, is refined by Ant UED Team.
</Paragraph>