div中p写满本行后换行
时间: 2023-11-27 22:52:49 浏览: 32
可以通过CSS的`word-wrap`属性实现。将`word-wrap`设置为`break-word`,当一行文字超出容器大小时,会自动将单词分割成多行。具体代码如下:
```css
div p {
word-wrap: break-word;
}
```
这样,在`<div>`中的`<p>`标签中写满一行后,会自动换行。
相关问题
div中display为flex时p写满本行换行
可以使用 `flex-wrap` 属性来实现:
```
div {
display: flex;
flex-wrap: wrap;
}
p {
flex: 1;
}
```
这样,当 `p` 元素的内容超出一行时,它会被压缩到一行并换行。同时,使用 `flex: 1` 让其自动填充剩余的空间,使得它宽度与其他元素相同。
一个div中多个p,当p换行时在本行写满后换行
可以使用CSS的`display`属性和`white-space`属性来实现这个效果。具体步骤如下:
1. 设置 div 的 `display` 属性为 `flex`,让多个 p 元素在一行内并排显示;
2. 设置 p 的 `white-space` 属性为 `nowrap`,禁止 p 元素自动换行;
3. 设置 p 的 `overflow-wrap` 属性为 `break-word`,让单词在 p 元素内自动换行。
下面是实现的 CSS 代码:
```css
div {
display: flex;
flex-wrap: wrap;
}
p {
white-space: nowrap;
overflow-wrap: break-word;
}
```
这样就可以让多个 p 元素在 div 中横向并排显示,当某个 p 元素的内容超出了一行时,会自动在该元素内部进行换行,而不会影响其他 p 元素的位置。