顺风文本没有在反应中溢出答案

【问题标题】：Tailwind text not overflowing in react顺风文本没有在反应中溢出
【发布时间】：2021-08-29 04:31:59
【问题描述】：

我的文本在我的 React/tailwind 应用程序中没有溢出时遇到问题。我希望文本可以在移动设备上水平滚动，但我的文本似乎被包含在内，如果我让屏幕变小，容器会不断调整大小而不是溢出。在任何其他应用程序中，这将是天赐之物，但我需要它溢出，以便我可以滚动它，就像您在移动设备上查看本网站上的链接一样...

https://www.glossier.com/

glossier.com horizontal scroll example

目前我的代码如下所示。如您所见，文本通过堆叠而不是每个字母并排放置，从而适合其各自 div 内的大小。

My app example

这是我的组件的代码：

import React from 'react';
import { Link } from 'react-router-dom';

const Scrolllinks = () => {
    return (
        <div className="flex flex-row w-full overflow-x-scroll uppercase">
                <Link className="box-border">Hydra Boost Daily Lenses</Link>
                <Link className="box-border">Blue Light Glasses</Link>
                <Link className="box-border">Hydration Drops</Link>
        </div>
    )
}

export default Scrolllinks;

【问题讨论】：

您好，请阅读minimal reproducible example

标签： html css reactjs tailwind-css tailwind-in-js

【解决方案1】：

父元素只需要flex和overflow-x-scroll。所有的孩子，<Link> 在你的情况下，需要flex-shrink-0，这将防止他们包装。

【讨论】：

【解决方案2】：

你可以按住 Shift + Scroll 它会工作

【讨论】：