Как решаешь задачу использования text break для разных браузеров с помощью вендорных префиксов?

Text Break с вендорными префиксами

Word break и related CSS свойства требуют вендорных префиксов для полной поддержки браузерами. Существует несколько подходов к решению этой проблемы.

CSS решение с вендорными префиксами

const textBreakStyles = `
  .text-break {
    word-break: break-word;
    -webkit-word-break: break-word;
    -moz-word-break: break-word;
    word-wrap: break-word;
    -webkit-word-wrap: break-word;
    -moz-word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-overflow-wrap: break-word;
    -moz-overflow-wrap: break-word;
  }

  .text-break-long {
    word-break: break-all;
    -webkit-word-break: break-all;
    -moz-word-break: break-all;
    overflow-wrap: break-word;
  }

  .text-break-url {
    word-break: break-all;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
  }
`;

Tailwind CSS подход

export default {
  theme: {
    extend: {
      textOverflow: {
        ellipsis: 'ellipsis',
        clip: 'clip'
      }
    }
  }
};

function TextBreakExample() {
  return (
    <div>
      <p className="break-words">
        VeryLongWordWithoutBreaksVeryLongWordWithoutBreaks
      </p>
      <p className="break-all">
        https://example.com/very/long/url/that/needs/breaking
      </p>
      <p className="break-words hyphens-auto">
        Antidisestablishmentarianism
      </p>
    </div>
  );
}

React компонент с поддержкой браузеров

function TextBreak({ text, variant = 'words' }) {
  const getTextBreakClass = () => {
    const baseStyles = 'overflow-wrap-break-word';
    
    switch(variant) {
      case 'all':
        return baseStyles + ' break-all';
      case 'words':
        return baseStyles + ' break-words';
      case 'url':
        return baseStyles + ' break-all hyphens-auto';
      default:
        return baseStyles;
    }
  };

  return (
    <div className={getTextBreakClass()}>
      {text}
    </div>
  );
}

Встроенные стили с префиксами

function TextBreakInline() {
  const textBreakStyle = {
    wordBreak: 'break-word',
    WebkitWordBreak: 'break-word',
    overflowWrap: 'break-word',
    WebkitOverflowWrap: 'break-word'
  };

  return (
    <div style={textBreakStyle}>
      VeryLongWordWithoutSpacesThatNeedsToBreak
    </div>
  );
}

Полная поддержка со сбросом

function AdvancedTextBreak({ text, shouldHyphenate = false }) {
  const style = {
    wordBreak: 'break-word',
    overflowWrap: 'break-word',
    wordWrap: 'break-word',
    WebkitWordBreak: 'break-word',
    WebkitOverflowWrap: 'break-word',
    WebkitWordWrap: 'break-word',
    MozWordBreak: 'break-word',
    MozOverflowWrap: 'break-word',
    MozWordWrap: 'break-word',
    ...(shouldHyphenate && {
      hyphens: 'auto',
      WebkitHyphens: 'auto',
      MozHyphens: 'auto'
    })
  };

  return (
    <p style={style}>
      {text}
    </p>
  );
}

Утилита-хук для проверки поддержки

function useBrowserSupport() {
  const [support, setSupport] = useState({
    wordBreak: false,
    overflowWrap: false,
    hyphens: false
  });

  useEffect(() => {
    const div = document.createElement('div');
    const style = div.style;

    setSupport({
      wordBreak: 'wordBreak' in style,
      overflowWrap: 'overflowWrap' in style,
      hyphens: 'hyphens' in style || 'WebkitHyphens' in style
    });
  }, []);

  return support;
}

function ComponentWithBrowserCheck() {
  const support = useBrowserSupport();

  const textStyle = {
    ...(support.overflowWrap && { overflowWrap: 'break-word' }),
    ...(support.wordBreak && { wordBreak: 'break-word' }),
    ...(support.hyphens && { hyphens: 'auto' })
  };

  return <div style={textStyle}>Long text here</div>;
}