css - 如何防止 div 的文本扩展表单宽度？

Question

我想在表单顶部显示的 div 中有一条警告消息。问题是由于消息很长，它扩展了表单的原始宽度。有没有办法防止它增加父表单的宽度，而是让文本换行？

export default function someFrom(props) {

    const handleFieldChange = props.handleFieldChange;

    const cautionMessage = <p>s simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was p </p>

    return(<>

       <div>
           {cautionMessage}
       </div>

        <div id="formBody">
            <Form.Group>
                <Form.Label>PhoneNumber</Form.Label>
                <Form.Control required type="text" pattern="[\d]{1, 10}"
                    placeholder="Only numbers Required"
                    onChange={(e) => handleFieldChange(e, "phoneNumber")}
                />
                <Form.Control.Feedback type="invalid">
                    Please enter 1-10 digits
                </Form.Control.Feedback>
            </Form.Group>

        </div>
       
    </>)

}