弹性行超过页面宽度，文本溢出：省略号不起作用

Question

自从添加了一些代码后，我的应用程序 flex 功能发生了变化。

理想情况下，在我的 MovieContainer 中，我希望 flex-direction 为行（当前设置为列）并且仅为页面宽度，然后在下一列重新开始，理想情况下为 6 横跨。但是当设置为 row 时，它超出了我的页面范围。

此外，自从添加此新代码后，我的 MovieName 上的文本溢出现在超出了其宽度，溢出不再隐藏。我觉得我已经以某种方式影响了这些样式化的组件，尽管当我更改字体大小时它工作正常。

样式化组件：

const MovieContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 280px;
  box-shadow: 0 3px 10px 0 #aaa;
  cursor: pointer;
`;
const CoverImage = styled.img`
  height: 362px;
`;
const MovieName = styled.span`
  font-size: 18px;
  font-weight: 600;
  color: black;
  margin: 15px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`;
const InfoColumn = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;
const MovieInfo = styled.span`
  font-size: 12px;
  font-weight: 500;
  color: black;
  text-transform: capitalize;
`;

其余代码：

const MovieComponent = () => {
  const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function fetchCinema() {
        const data = await api.getFilm(theater);
        if (data.Provider === "Film World") {
          console.log("FILM WORLD: ", data.Provider);
          console.log(`Data ${theater}World: `, data);
          setFilmWorld(data);
        } else {
          console.log("CINEMAWORLD: ", data.Provider);
          console.log(`Data ${theater}World: `, data);
          setCinemaWorld(data);
        }
      }
      fetchCinema();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

自从对以下代码进行更改后，样式似乎变得不正常了。这是调用样式组件的地方：

return (
        <MovieContainer>
          {movies.map((movie, index) => (
            <div className="movies" key={index}>
              <MovieName>{movie.Title}</MovieName>
              <CoverImage src={movie.Poster} alt={movie.Title} />
              <InfoColumn>
                <MovieInfo>Filmworld Price: ${movie.Price}</MovieInfo>
                <MovieInfo>Cinemaworld Price: ${movie.cinemaWorldPrice}</MovieInfo>
              </InfoColumn>
            </div>
          ))}
        </MovieContainer>
      );
    };
    
    export default MovieComponent;

Answer 1

如果我对您的理解正确，这就是您要实现的目标：

如果是这种情况，您只需添加以下行：

const MovieContainer = styled.div`
  .
  .
  .
  flex-direction: row;
  flex-wrap: wrap;
`;

弹性行超过页面宽度，文本溢出：省略号不起作用

flex row exceeding page width, text-overflow: ellipsis not working

higher-order-functions

reactjs

react-native

styled-components