当输入太大时，有序列表中的单词不会换行

Question

当输入太长时，我的文字不会换行。我试过使用 flex-wrap 和 align-items 但无济于事。一旦输入太大，它就会溢出。下面是它的样子。

这是我的 Css 文件

.recipe{ 
    border-radius: 20px;
    box-shadow: 0px 5px 5px black;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background:white;
    align-items: center;
    min-width: 40%;
    flex-wrap: 'wrap';
    white-space: unset;
}

.image{
    border-radius:50%;
    width: 100px;
    height: 100px;
}

这是我的 javascript 文件 recipe.js

import React from "react";
import style from './recipe.module.css'

const Recipe = ({title, calories, image, ingredients}) => {

    const round = Math.round(calories);
    
   
    return(
        <div className = {style.recipe}>
            <h1 >{title}</h1>

            <ol>
                {ingredients.map(ingredient => (
                    <li>{ingredient.text}</li>
                ))}            
            </ol>

            <p>calories: {round} </p>
            

            <img className = {style.image} src={image} alt=""/>

           
        </div>
    )
}

export default Recipe;

Answer 1

如果您希望元素的文本换行，有两件事：

它们的容器元素必须有宽度限制（但现在你的 OL 缺少一个，并且超过了它父元素的宽度）
带有要换行的文本的元素应该具有 whitespace: wrap 的样式（但目前它没有......或者至少不是一个明确的样式，但它可能是已有默认值）

Answer 2

ingredients 的父元素不是 div，而是 <ol> 标签。所以你需要制作那个 flex ，然后你可以使用 flex-wrap，否则你可能不需要。

当输入太大时，有序列表中的单词不会换行

words in an ordered list will not wrap when the input is too large

html

word-wrap

reactjs