我需要这样。 Clip 仅适用于 chrome。我需要这个用于 react 元素。仅使用 css 会有所帮助。
最佳答案
您可以通过这种方式使用一种解决方案。
像这样。
/* styles for '...' */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn't adjoin right side */
text-align: justify;
/* place for '...' */
margin-right: -1em;
padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
/* points in the end */
content: '...';
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
/* points in the end */
content: '';
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
/* set width and height */
width: 1em;
height: 1em;
margin-top: 0.2em;
/* bg color = bg color under block */
background: white;
}
引用。链接 - http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
关于html - 如何在跨浏览器兼容的第二行中获得省略号 [React],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46417867/