内容超出div宽度后自动换行的css代码

 我来答
加百列windy
高粉答主

2018-12-01 · 每个回答都超有意思的
知道小有建树答主
回答量:2074
采纳率:100%
帮助的人:95.6万
展开全部

使用一段css代码:”word-wrap: break-word;word-break: break-all;overflow: hidden;“。

实例演示如下:

1、设计两个容器,放入一些文字,代码如下:

此时的页面展示如下:(均为换行)

2、修改两个容器的样式,给第一个容器加上了关键代码如下:

此时的页面展示(第一个已经换行):

扩展资料:

css详解:

一、word-wrap: normal|break-word(word-wrap 属性允许长单词或 URL 地址换行到下一行)。

1、normal ,只在允许的断字点换行(浏览器保持默认处理,默认值)。

2、break-word, 在长单词或 URL 地址内部进行换行。

二、word-break: normal|break-all|keep-all(通过使用 word-break 属性,可以让浏览器实现在任意位置的换行)。

1、normal 使用浏览器默认的换行规则。(默认值)

2、break-all 允许在单词内换行。

3、keep-all 只能在半角空格或连字符处换行。



大雅新科技有限公司
2024-11-19 广告
这方面更多更全面的信息其实可以找下大雅新。深圳市大雅新科技有限公司从事KVM延长器,DVI延长器,USB延长器,键盘鼠标延长器,双绞线视频传输器,VGA视频双绞线传输器,VGA延长器,VGA视频延长器,DVI KVM 切换器等,优质供应商,... 点击进入详情页
本回答由大雅新科技有限公司提供
码匠
2017-11-12 · 原创桌游与酷玩,为你带去更多欢乐
码匠
采纳数:625 获赞数:4623

向TA提问 私信TA
展开全部
默认情况下,当内容文本超出div宽度之后,就会自动换行,除非你使用的是一些“aaaaaaaaaaaaaaaaaaaaaaa”之类的无间断的英文(测试用数据),这时候你可以使用 word-break属性进行处理,设置word-break: break-all;即可
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
河东陈彬
推荐于2017-11-15 · 知道合伙人软件行家
河东陈彬
知道合伙人软件行家
采纳数:68 获赞数:586

向TA提问 私信TA
展开全部
html中超出盒子宽度会自动换行的,不用设置,如果你连续的英文之间没用空格,那么它会以为是一个单词,就不会换行,这个时候加上word-break: break-all; word-wrap:break-word;
就可以了。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
裴裴同
2013-01-15 · TA获得超过227个赞
知道小有建树答主
回答量:328
采纳率:50%
帮助的人:140万
展开全部
只要你div宽度设定好了中文会自动换行的不需要加CSS它自己也会换行。如果是一个长的字符串英文你加什么都没有用。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
OFFSK灵魂错觉
2020-03-21 · TA获得超过476个赞
知道小有建树答主
回答量:367
采纳率:68%
帮助的人:49万
展开全部

这段代码才对!

  • white-space:pre-wrap;

  • white-space:-moz-pre-wrap;

  • white-space:-pre-wrap;

  • white-space:-o-pre-wrap;

  • word-wrap:break-word;

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(14)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式