使用溢出的输出窗口在 tailwind css 上的行为不符合预期

Question

我用原始输出得到了这个初始设计，如下所示：

它按照预期占据了整个宽度。问题是，当它有内容并且内容太长时，它会破坏设计并变得太长：

如您所见，宽度太长，破坏了设计。原始输出的溢出破坏了设计。这是我的代码：

更新：这是我的index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* UNI STYLE */
  * {
    @apply m-0 p-0;
  }

  html,
  body,
  #root {
    @apply h-full;
  }

  /* TOP NAVIGATION */

  .mobile-navigation {
    @apply flex items-center justify-between bg-gray-800 p-4 text-white md:hidden;
  }

  .mobile-logo {
    @apply text-lg font-bold;
  }

  .mobile-button {
    @apply z-50  focus:outline-none;
  }
  /* EOL - TOP NAVIGATION */

  /*  SIDEBAR CSS */
  .sidebar {
    @apply flex h-screen flex-col md:flex-row;
  }

  .logo {
    @apply text-center font-bold sm:p-3 md:p-6 md:text-xl;
  }

  nav ul .links {
    @apply hover:bg-test block px-6  py-4;
  }

  nav ul .mobile-links {
    @apply hover:bg-test block  px-4 py-4  text-center hover:text-fountainBlue;
  }

  .active {
    font-weight: bold;
    color: #86a3da;
  }
}

更新：这是 SideNavigationLayout.tsx

import { Link, routes } from '@redwoodjs/router'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
import { useLocation } from '@redwoodjs/router'

type SideNavigationLayoutProps = {
  children?: React.ReactNode
}

const SideNavigationLayout = ({ children }: SideNavigationLayoutProps) => {
  const [menuOpen, setMenuOpen] = useState(false)
  const location = useLocation()

  const toggleMenu = () => {
    setMenuOpen(!menuOpen)
  }

  return (
    <div className="sidebar">
      <header className="mobile-navigation">
        <h1 className="mobile-logo">FantaTech - Gen-AI</h1>
        <button
          onClick={toggleMenu}
          className={`mobile-button 
              ${menuOpen ? 'text-gray-800' : 'text-white'}`}
          aria-label="Toggle menu"
        >
          <FontAwesomeIcon
            icon={menuOpen ? faTimes : faBars}
            className="h-6 w-6"
          />
        </button>
      </header>

      <aside
        className={`fixed left-0 top-0 z-40 h-full w-full transform pt-6 transition-transform duration-300 md:static md:z-auto md:h-auto md:w-auto md:translate-x-0 md:bg-gray-800 md:pt-3 md:text-white
                    ${menuOpen ? 'translate-x-0 bg-gray-100 text-gray-800' : '-translate-x-full bg-gray-800 text-white'}`}
      >
        <div className="logo">
          <h2>FantaTech - Gen-AI</h2>
        </div>
        <nav className="mt-3">
          <ul>
            <Link
              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.scrape() ? 'active' : ''}`}
              to={routes.scrape()}
            >
              <li>Scrape</li>
            </Link>
            <Link
              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.crawl() ? 'active' : ''}`}
              to={routes.crawl()}
            >
              <li>Crawl</li>
            </Link>
            <Link
              className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.pdfUpload() ? 'active' : ''}`}
              to={routes.pdfUpload()}
            >
              <li>PDF Upload</li>
            </Link>
          </ul>
        </nav>
      </aside>

      <main className="flex-1">{children}</main>

      {/* Overlay for mobile menu */}
      {/* {menuOpen && (
        <div
          className="fixed inset-0 z-30 bg-black bg-opacity-50 md:hidden"
          onClick={toggleMenu}
        ></div>
      )} */}
    </div>
  )
}

export default SideNavigationLayout

ScrapePage.tsx

const ScrapePage = () => {
  const [searchInput, setSearchInput] = useState('')
  const [outputData, setOutputData] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  const handleSubmit = async () => {
    setIsLoading(true)
    setIsSubmitted(true)
    try {
      const apiEndpoint = 'http://localhost:8087/simplify'

      const response = await fetch(apiEndpoint, {
        method: 'POST',
        body: JSON.stringify({ url: searchInput }),
      })

      if (!response.ok) {
        throw new Error('Failed to fetch results')
      }

      const text = await response.text()
      setOutputData(text)
      // setOutputData(JSON.stringify(json, null, 2));
    } catch (error) {
      setOutputData(`Error: ${error.message}`)
    } finally {
      setIsLoading(false)
    }
  }

  const handleInputChange = (event) => {
    setSearchInput(event.target.value)
    setIsSubmitted(false)
  }

  return (
    <>
      <Metadata title="Scrape" description="Scrape page" />

      <div className="h-screen overflow-auto bg-gray-100 p-9">
        <SearchForm
          searchInput={searchInput}
          isLoading={isLoading}
          onInputChange={handleInputChange}
          onSubmit={handleSubmit}
        />

        <div className="flex w-full flex-col">
          <div className="mt-4">
            <h2 className="text-l mb-2 text-gray-700">
              <strong>Raw Output</strong>
            </h2>
            <RawOutput input={isSubmitted ? outputData : searchInput} />
          </div>

          <div className="mt-8">
            <h2 className="text-l mb-2 text-gray-700">
              <strong>Extract</strong>
            </h2>
            <ExtractOutput />
          </div>
        </div>
      </div>
    </>
  )
}

export default ScrapePage

导出默认ScrapePage

原始输出.tsx

const RawOutput = ({ input }: Props) => {
  return (
    <div className="rounded-md border border-gray-300 bg-gray-50 p-4">
      <pre className="overflow-auto text-gray-800">
        {input || 'No input provided'}
      </pre>
    </div>
  )
}

当我在父 div 上应用

overflow-auto

时，它不会破坏高度方面的设计：

image of the container with correct height

但就宽度而言，设计被破坏了：

基本上我的目标只是原始输出的宽度将根据屏幕尺寸固定，并且只有在太长时才会有滚动。完美的例子是 stackoverflow 中当共享的代码太长时的设计：

Answer 1

您希望将

min-width: 0

应用于

<main>

中的

SideNavigationLayout.tsx

元素：

tailwind.config = {
  theme: {
    extend: {
        backgroundColor: {
        test: 'slate',
      },
        textColor: {
        fountainBlue: 'blue',
      }
    }
  }
}

<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<style type="text/tailwindcss">
@layer components {
  /* UNI STYLE */
  * {
    @apply m-0 p-0;
  }

  html,
  body,
  #root {
    @apply h-full;
  }

  /* TOP NAVIGATION */

  .mobile-navigation {
    @apply flex items-center justify-between bg-gray-800 p-4 text-white md:hidden;
  }

  .mobile-logo {
    @apply text-lg font-bold;
  }

  .mobile-button {
    @apply z-50  focus:outline-none;
  }
  /* EOL - TOP NAVIGATION */

  /*  SIDEBAR CSS */
  .sidebar {
    @apply flex h-screen flex-col md:flex-row;
  }

  .logo {
    @apply text-center font-bold sm:p-3 md:p-6 md:text-xl;
  }

  nav ul .links {
    @apply hover:bg-test block px-6  py-4;
  }

  nav ul .mobile-links {
    @apply hover:bg-test block  px-4 py-4  text-center hover:text-fountainBlue;
  }

  .active {
    font-weight: bold;
    color: #86a3da;
  }
}
</style>

<div id="app"></div>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="importmap">
  {
    "imports": {
      "@fortawesome/free-solid-svg-icons": "https://esm.sh/@fortawesome/free-solid-svg-icons",
      "@fortawesome/react-fontawesome": "https://esm.sh/@fortawesome/react-fontawesome",
      "react": "https://esm.sh/react@18",
      "react-dom/client": "https://esm.sh/react-dom@18/client"
    }
  }
</script>
<script type="text/babel" data-type="module">
  import React from "react";
  import client from "react-dom/client";

  const RawOutput = ({ input }) => {
    return (
      <div className="rounded-md border border-gray-300 bg-gray-50 p-4">
        <pre className="overflow-auto text-gray-800">
          {input || 'No input provided'}
        </pre>
      </div>
    )
  }
  
  const SearchForm = () => <div>SearchForm</div>
  const ExtractOutput = () => <div>ExtractOutput</div>

  const ScrapePage = () => {
    const [searchInput, setSearchInput] = useState('')
    const [outputData, setOutputData] = useState(Array(10).fill().map(() => window.crypto.randomUUID()).join('-'))
    const [isLoading, setIsLoading] = useState(false)
    const [isSubmitted, setIsSubmitted] = useState(true)

    const handleSubmit = async () => {
      setIsLoading(true)
      setIsSubmitted(true)
      try {
        const apiEndpoint = 'http://localhost:8087/simplify'

        const response = await fetch(apiEndpoint, {
          method: 'POST',
          body: JSON.stringify({ url: searchInput }),
        })

        if (!response.ok) {
          throw new Error('Failed to fetch results')
        }

        const text = await response.text()
        setOutputData(text)
        // setOutputData(JSON.stringify(json, null, 2));
      } catch (error) {
        setOutputData(`Error: ${error.message}`)
      } finally {
        setIsLoading(false)
      }
    }

    const handleInputChange = (event) => {
      setSearchInput(event.target.value)
      setIsSubmitted(false)
    }

    return (
      <>
        {/*<Metadata title="Scrape" description="Scrape page" />*/}

        <div className="h-screen overflow-auto bg-gray-100 p-9">
          <SearchForm
            searchInput={searchInput}
            isLoading={isLoading}
            onInputChange={handleInputChange}
            onSubmit={handleSubmit}
          />

          <div className="flex w-full flex-col">
            <div className="mt-4">
              <h2 className="text-l mb-2 text-gray-700">
                <strong>Raw Output</strong>
              </h2>
              <RawOutput input={isSubmitted ? outputData : searchInput} />
            </div>

            <div className="mt-8">
              <h2 className="text-l mb-2 text-gray-700">
                <strong>Extract</strong>
              </h2>
              <ExtractOutput />
            </div>
          </div>
        </div>
      </>
    )
  }
  
  // import { Link, routes } from '@redwoodjs/router'
  import { useState } from 'react'
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
  // import { useLocation } from '@redwoodjs/router'

  const Link = props => <a {...props}/>;
  const routes = {
    crawl: () => {},
    pdfUpload: () => {},
    scrape: () => {},
  };
  const useLocation = () => ({});

  const SideNavigationLayout = ({ children }) => {
    const [menuOpen, setMenuOpen] = useState(false)
    const location = useLocation()

    const toggleMenu = () => {
      setMenuOpen(!menuOpen)
    }

    return (
      <div className="sidebar">
        <header className="mobile-navigation">
          <h1 className="mobile-logo">FantaTech - Gen-AI</h1>
          <button
            onClick={toggleMenu}
            className={`mobile-button 
                ${menuOpen ? 'text-gray-800' : 'text-white'}`}
            aria-label="Toggle menu"
          >
            <FontAwesomeIcon
              icon={menuOpen ? faTimes : faBars}
              className="h-6 w-6"
            />
          </button>
        </header>

        <aside
          className={`fixed left-0 top-0 z-40 h-full w-full transform pt-6 transition-transform duration-300 md:static md:z-auto md:h-auto md:w-auto md:translate-x-0 md:bg-gray-800 md:pt-3 md:text-white
                      ${menuOpen ? 'translate-x-0 bg-gray-100 text-gray-800' : '-translate-x-full bg-gray-800 text-white'}`}
        >
          <div className="logo">
            <h2>FantaTech - Gen-AI</h2>
          </div>
          <nav className="mt-3">
            <ul>
              <Link
                className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.scrape() ? 'active' : ''}`}
                to={routes.scrape()}
              >
                <li>Scrape</li>
              </Link>
              <Link
                className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.crawl() ? 'active' : ''}`}
                to={routes.crawl()}
              >
                <li>Crawl</li>
              </Link>
              <Link
                className={`${menuOpen ? 'mobile-links' : 'links'} ${location.pathname === routes.pdfUpload() ? 'active' : ''}`}
                to={routes.pdfUpload()}
              >
                <li>PDF Upload</li>
              </Link>
            </ul>
          </nav>
        </aside>

        <main className="flex-1 min-w-0">{children}</main>

        {/* Overlay for mobile menu */}
        {/* {menuOpen && (
          <div
            className="fixed inset-0 z-30 bg-black bg-opacity-50 md:hidden"
            onClick={toggleMenu}
          ></div>
        )} */}
      </div>
    )
  }

  const rootElement = document.getElementById("app");
  client.createRoot(rootElement).render(<SideNavigationLayout><ScrapePage/></SideNavigationLayout>);
</script>

如果没有修复，

<main>

元素将具有

min-width: min-content

。这个

min-content

将使用其内容中最长的不可破坏的字符串作为其计算的一部分来解析。因此，应用

min-width: 0

会覆盖此行为，从而允许子元素比其最长的不可破坏的字符串更窄，从而允许根据需要进行水平溢出。

使用溢出的输出窗口在 tailwind css 上的行为不符合预期

问题描述投票：0回答：1

1个回答

最新问题

使用溢出的输出窗口在 tailwind css 上的行为不符合预期

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1