文本超过两行后，自动缩小字号

最新推荐文章于 2024-06-14 17:48:41 发布

tianming2018

最新推荐文章于 2024-06-14 17:48:41 发布

阅读量886

点赞数

文章标签： javascript css

本文链接：https://blog.csdn.net/tianming2018/article/details/130980754

版权

文章介绍了一种方法，通过CSS的@supports规则和JavaScript的useEffectHook，当文本超过两行时动态调整字号以适应容器。利用Flexbox布局，结合line-clamp和transition属性，确保在支持这些特性的浏览器中实现平滑的字号变化。

摘要由CSDN通过智能技术生成

要实现文本超过两行后，自动缩小字号以适应内容的效果，可以使用CSS的@supports规则结合JavaScript来实现。

.container {
  display: flex;
  flex-direction: column;
  max-height: 3.6em; /* 2行文字高度 * 字号 */
  overflow: hidden;
}

.container p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 支持 line-clamp 的浏览器 */
  @supports (-webkit-line-clamp: 2) or (line-clamp: 2) {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-pack: center;
    -webkit-box-align: end;
    font-size: 16px; /* 初始字号 */
    transition: font-size 0.2s;
  }
}

import React, { useEffect, useRef } from 'react';

function MyComponent() {
  const containerRef = useRef(null);
  const textRef = useRef(null);
  let fontSize = 16;

  useEffect(() => {
    const container = containerRef.current;
    const text = textRef.current;

    const adjustFontSize = () => {
      while (text.scrollHeight > container.offsetHeight) {
        fontSize--;
        text.style.fontSize = `${fontSize}px`;

        if (fontSize <= 10) {
          break;
        }
      }
    };

    adjustFontSize();
  }, []);

  return (
    <div className="container" ref={containerRef}>
      <p ref={textRef}>Hello World</p>
    </div>
  );
}