Skip to main content

Text

Dependencies​

npm install @mui/material @emotion/react @emotion/styled

Usage​

import {
  LimitLines1,
  LimitLines2,
} from "@arclockproject/common/components/Text";

MUI Typography that cuts text off after 1 or 2 lines.

The examples below are live. Edit the code to try your own values. The text counts from 0 to 150.

LimitLines1​

▶ Show code (click to view and edit)
Live Editor
<LimitLines1>
  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
  55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
  81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
  105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
  124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
  143 144 145 146 147 148 149 150
</LimitLines1>
Result
Loading...

LimitLines2​

▶ Show code (click to view and edit)
Live Editor
<LimitLines2>
  0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
  55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
  81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
  105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
  124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
  143 144 145 146 147 148 149 150
</LimitLines2>
Result
Loading...

Resizing​

Drag the slider to change the width. The cut-off moves with it.

▶ Show code (click to view and edit)
Live Editor
function TextPlayground() {
  const [width, setWidth] = useState(300);
  const text = "The quick brown fox jumps over the lazy dog. ".repeat(6);

  return (
    <div>
      <input type="range" min={80} max={700} value={width} onChange={(e) => setWidth(Number(e.target.value))} /> {width}px
      <div style={{ width, border: "1px dashed var(--ifm-color-emphasis-400)", padding: 8, marginTop: 8 }}>
        <LimitLines1 variant="h6">{text}</LimitLines1>
        <LimitLines2>{text}</LimitLines2>
      </div>
    </div>
  );
}
Result
Loading...

API​

See the Text API reference for every prop, method and type.