هل توجد طريقة لجعل حجم الخط متجاوب بحسب طول النص في CSS ؟

حسب ما فهمت فإنه يمكنك تحقيق هذا السلوك بواسطة تكوين الخط بناءً على طول النص.

في React JS مع Material UI، يمكنك تحقيق ذلك باستخدام Typography . 

import React from 'react';
import Typography from '@material-ui/core/Typography';

const DynamicFontSizeText = ({ text }) => {
  // تحديد حجم الخط بناءً على طول النص
  const fontSize = text.length > 10 ? '16px' : '24px';

  return (
    <Typography variant="body1" style={{ fontSize }}>
      {text}
    </Typography>
  );
};

export default DynamicFontSizeText;

في هذا المثال، إذا كانت النصوص قصيرة (10 حروف أو أقل)، سيتم تعيين حجم الخط إلى 24px، وإلا سيتم تعيينه إلى 16px، يمكنك ضبط هذه القيم وفقًا لاحتياجات التصميم الخاصة بك.

يمكنك استخدام هذا المكون في مكان أي مكون Typography في تطبيقك وتمرير النص كخاصية text:

<DynamicFontSizeText text="هنا يكون النص" />

عليك أستخدام خاصية  overflow-wrap مع بعض التنسيقات الأخرى لضمان عدم حدوث أية مشاكل، وإليك مثال:

HTML:

<div class="container">
    <p class="long-text">هذا هو نص طويل جدا يحتوي على الكثير من الكلمات والجمل. هذا هو نص طويل جدا يحتوي على الكثير من الكلمات والجمل.</p>
</div>

CSS:

.long-text {
  overflow-wrap: break-word; /* يُستخدم لتحديد تكسير الكلمات في حال تجاوزت الحاوية حدودها، للحفاظ على التنسيق. */
  hyphens: auto; /* تُستخدم لتحديد ما إذا كانت الهوامش (الواصلات) مسموح بها لتقسيم الكلمات عند التمدد على السطر. */
  white-space: normal; /* يُستخدم لتحديد كيفية التعامل مع المسافات البيضاء داخل العنصر . */
}

الحل الأفضل لحالتك ان لم ترد ان يتناسب مع حجم الشاشة هو اختيار عدد أحرف معين، وبناء عليه تختار حجم النص، رغم أن هذا غير شائع لأنه عليك عد الأحرف التي تريد واختيار قياس الشاشة أيضا:
 

export default function Text(){

  const mediaQuery = window.matchMedia('(max-width: 600px)');
  const text = "the main text you want to be small if long enough"
  function handleMediaChange(mediaQuery) {
    let fontSizeClass
    if (mediaQuery) {
		if (text.length > 15) { // you can change this threshold
        	fontSizeClass = "16px" // an example
        } else {
        	fontSizeClass = "26px" // an example
        }
    }
    return fontSizeClass
  }
  
  mediaQuery.addListener(handleMediaChange);
  const finalFontSizeClass = handleMediaChange(mediaQuery);

  return (
  	<div style={{fontSize: finalFontSizeClass}}>
  		{text}
    </div>
  )
  
}