小编And*_*ton的帖子

我做了一个说明问题的codepen演示:codepen.io/acusti/pen/mJmVRy

如果我尝试在Firefox中加载svg内容,这是我得到的错误:

XML解析错误:未关闭的令牌
位置:data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%20120'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><circle%20cx='45'%20cy='45'%20r='30'%20fill='#555555'></circle></svg>
第1行,第77列:

<svg viewBox='0 0 120 120' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='45' cy='45' r='30' fill='
----------------------------------------------------------------------------^

注意:我通过单击Firefox开发人员工具中的数据URI字符串(在检查.separator元素时在CSS Rules面板内)得到该错误,其中工具提示显示"无法加载图像".只需将上面的错误消息中的位置字符串复制粘贴到Firefox地址栏中即可完成相同的操作.

我有一个段落标签，我想检查省略号是否显示，但我正在使用-webkit-line-clampcss 属性。

我有以下组件和挂钩，但是使用宽度值不起作用。scrollWidth、clientWidth和的值offsetWidth始终相同。

const Description = ({ data }: Props) => {
  const [open, setOpen] = useState<boolean>(false);
  const ref = useRef<HTMLParagraphElement>(null);
  const isTruncated = useIsTruncated(ref);

  return (
    <>
      <div className="my-3 max-h-[4.5rem] relative">
        <p ref={ref} className="inline line-clamp-3">
          {data.description}
        </p>
        {isTruncated && (
          <button
            className="text-blue-600 leading-none absolute bottom-0 right-0 font-medium"
            onClick={() => setOpen(true)}
          >
            more
          </button>
        )}
      </div>
      <Modal open={open} setOpen={setOpen} />
    </>
  );
};


const useIsTruncated = (element: RefObject<HTMLParagraphElement>) => {
  const determineIsTruncated …

我想在我的节点应用程序中使用autoprefixer来编译css.为了我的特殊需要,我想调用autoprefixer没有回调或承诺.

很简单:

var result = autoprefixer.process(css);

要么

var result = myPrefixerWrap(css);

我有一段时间与之斗争,你能帮助我吗？

谢谢

ps:我已经尝试过postcss-js,但它会产生一个json对象用于反应,而不是纯css.例如{borderRadius:"5px"}

var prefixer    = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject   = postcssJS.objectify(cssCompiled);
var autoResult  = prefixer(cssObject);