keep-all没有像老师演示的效果,没有换行

keep-all没有像老师演示的效果,没有换行

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

div{

width:500px;

height:500px;

border:1px solid red;

margin-top:100px;

word-break:keep-all;

}



</style>

</head>


<body>

<div>

颜色的分布是从0%(渐变圆心)的位置到100%的位置的(100%的位置也就是渐变的半径)。或者说默认情况下,第一个颜色的位置是0%,最后一个颜色是100%。颜色的分布是从0%(渐变圆心)的位置到100%的位置的(100%的位置也就是渐变的半径)。或者说默认情况下,第一个颜色的位置是0%,最后一个颜色是100%。颜色的分布是从0%(渐变圆心)的位置到100%的位置的(100%的位置也就是渐变的半径)。或者说默认情况下,第一个颜色的位置是0%,最后一个颜色是100%。颜色的分布是从0%(渐变圆心)的位置到100%的位置的(100%的位置也就是渐变的半径)。或者说默认情况下,第一个颜色的位置是0%,最后一个颜色是100%。

</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5a02cdc30001948119200840.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
卡布琦诺 2017-11-09 09:59:15

目前keep-all对火狐浏览器的支持还不是很好,建议可以加上火狐的私有前缀-moz-word-break:keep-all;希望可以帮到你~

提问者 忆之 2017-11-08 20:08:17

你好,我看了老师讲的有中文案例是可以换行的,可是我没有做出来,是不兼容火狐浏览器吗???

小丸子爱吃菜 2017-11-08 18:16:13

效果没有问题,你把汉字改成英文字母,就能跟老师的效果差不多了。

祝学习愉快!

  • 提问者 忆之 #1
    你好,我看了老师讲的有中文案例是可以换行的,可是我没有做出来,是不兼容火狐浏览器吗???
    2017-11-08 20:09:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师