[英]How to display show more only when text overflows from a div using pure css javascript in reactjs
I have a component that gets a dynamic text.我有一个获取动态文本的组件。 I am showing ellipsis when the text overflows the width of div.当文本溢出 div 的宽度时,我显示省略号。 Now, I am showing a show more
and when user clicks on it, I am showing the entire text and show show less
link.现在,我正在show more
,当用户点击它时,我将显示整个文本并show less
链接。
import React from "react";
import "./styles.css";
export default function App(props) {
const [showMore, setShowMore] = React.useState(true);
const onClick = () => {
setShowMore(!showMore);
}
return (
<>
<div className={showMore ? '' : "container"}>{props.text}</div>
<span className="link" onClick={onClick}>{showMore ? 'show less' : 'show more'}</span>
</>
);
}
.container {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block !important;
width: 250px;
background-color: #eaeaea;
}
The code above shows show more
link even if the text doesn't overflow.即使文本没有溢出,上面的代码也会show more
链接。
But I want to show show more
link only when text overflows.但我只想在文本溢出时show more
链接。 How can I achieve that?我怎样才能做到这一点?
EDIT编辑
From crays' comment I found this stackoverflow anwser从 crays 的评论中,我发现了这个stackoverflow anwser
Now, I tried using a ref to access the styles as following现在,我尝试使用 ref 访问样式如下
import React from "react";
import "./styles.css";
export default function App(props) {
const [showMore, setShowMore] = React.useState(false);
const onClick = () => {
setShowMore(!showMore);
};
const checkOverflow = () => {
const el = ref.current;
const curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
const isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
};
const ref = React.createRef();
return (
<>
<div ref={ref} className={showMore ? "container-nowrap" : "container"}>
{props.text}
</div>
{(checkOverflow()) && <span className="link" onClick={onClick}>
{showMore ? "show less" : "show more"}
</span>}
</>
)
}
I also tried using forwardref
我也试过使用forwardref
export const App = React.forwardRef((props, ref) => {
const [showMore, setShowMore] = React.useState(false);
const onClick = () => {
setShowMore(!showMore);
};
const checkOverflow = () => {
const el = ref.current;
const curOverflow = el.style.overflow;
if (!curOverflow || curOverflow === "visible") el.style.overflow = "hidden";
const isOverflowing =
el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
};
return (
<>
<div ref={ref} className={showMore ? "container-nowrap" : "container"}>
{props.text}
</div>
{checkOverflow() && (
<span className="link" onClick={onClick}>
{showMore ? "show less" : "show more"}
</span>
)}
</>
);
});
But I am getting an error Cannot read property 'style' of null
但我收到错误Cannot read property 'style' of null
看看这篇文章,它使用“复选框黑客”来做到这一点。
I think you may go with another approach, instead of depending on what is happening visually inside the browser我认为您可能会采用另一种方法,而不是取决于浏览器内部视觉上发生的事情
let's say the text will only overflow when you have more than N char (define this number by your self) for example 100 char假设文本仅在您有超过 N 个字符(由您自己定义此数字)时才会溢出,例如 100 个字符
import {useState} from 'react';
export const Accordion = ({ text, limit = 100 }) => {
const isExpandable = text.length > limit;
const [viewText, setViewText] = useState(
isExpandable ? text.slice(0, limit) : text
);
const isExpanded = text.length === viewText.length;
return (
<>
<p>{viewText}</p>
{isExpandable && (
<button
onClick={() => setViewText(isExpanded ? text.slice(0, limit) : text)}
>
{isExpanded ? "show less" : "show more"}
</button>
)}
</>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.