title: react text-overflow: ellipsis does not work
body: <p>I'm using styled-components.<br />
  If the title of a table has more characters than 400px... I've applied text-overflow: ellipsis; to the td, but it's not working.<br />
  I don't know how to solve this problem.<br />
  How can I apply text-overflow to td in table tags?</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  export default function App() {
    const lists = [
      &quot;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&quot;,
      &quot;october&quot;,
      &quot;A&quot;
    ];
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Table&gt;
          &lt;tr&gt;
            &lt;td&gt;title&lt;/td&gt;
            &lt;td&gt;date&lt;/td&gt;
            &lt;td&gt;type&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              {lists.map((list) =&gt; (
                &lt;td&gt;{list}&lt;/td&gt;
              ))}
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/Table&gt;
      &lt;/div&gt;
    );
  }
  
  const Table = styled.table`
    width: 100%;
  
    td {
      min-width: 50px;
      padding: 1rem;
    }
  
    tbody {
      tr {
        box-sizing: border-box;
  
        td {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 400px;
  
          &amp;:first-child {
            color: red;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 400px;
          }
        }
      }
    }
  `;
  
  </code></pre>