• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > url 关于自动换行问题

url 关于自动换行问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含url,自动换行等相关知识,佚名 希望在学习及工作中可以帮助到您

举个例子来说明:

使用: <wbr>, &#8203; and &shy; 的其中一个在有可能要分开的字符后面。浏览器就会按需要换行。

原始的代码:

<div style="width:200px; border:1px solid #000000;">
 http://www.abcdef.com/aaaaa/bbbbb/ccccc/ddddd/eeeee/ffff/ggg/index.htm
</div>

使用<wbr>的html代码

<div style="width:200px; border:1px solid #000000;">
 http:<wbr>/<wbr>/<wbr>www.abcdef.com/<wbr>aaaaa/<wbr>bbbbb/<wbr>ccccc/<wbr>ddddd/<wbr>eeeee/<wbr>ffff/<wbr>ggg/<wbr>index.htm
</div>

使用&#8203的html代码

<div style="width:200px; border:1px solid #000000;">
 http:&#8203;/&#8203;/&#8203;www.abcdef.com/&#8203;aaaaa/&#8203;bbbbb/&#8203;ccccc/&#8203;ddddd/&#8203;eeeee/&#8203;ffff/&#8203;ggg/&#8203;index.htm
</div>

使用&shy;的html代码

<div style="width:200px; border:1px solid #000000;">
 http:&shy;/&shy;/&shy;www.abcdef.com/&shy;aaaaa/&shy;bbbbb/&shy;ccccc/&shy;ddddd/&shy;eeeee/&shy;ffff/&shy;ggg/&shy;index.htm
</div>

参考的html代码
<div style="width:200px; border:1px solid #000000;">
 123 456 789 123 456 789 123 456
</div>

把以上的代码保存为html文件,就可以看到效果。特别是ie。

<wbr>, &#8203; 和 &shy;在ie和firefox通过。

&#8203在chrome通过。而<wbr> 和 &shy;没有在chrome测试过。

注:没有在中文环境下测试过。编码使用的是utf-8。

您可能想查找下面的文章:

  • 使用css的background:url设置背景图方法
  • 页面内嵌样式表中使用url(), 出现页面多次载入问题解决
  • 浏览器中的data类型的Url格式 data:image/png,data:image/jpeg!
  • css中url的路径含义及使用
  • css中url的路径含义
  • url 关于自动换行问题

相关文章

  • 2017-08-06总结CSS的position定位属性在使用的一些重点
  • 2017-08-06html 滚动条在IE6和IE7中兼容性问题
  • 2017-08-06CSS 设置技巧(单位和值与样式设置技巧)
  • 2017-08-06网站用户体验设计中的法则:信息交互设计金字塔法则
  • 2017-08-06让div透明而里面的文字不透明的写法
  • 2017-08-06细说CSS中margin属性的使用
  • 2017-08-06CSS 透明背景时,记得给容器加上width宽度
  • 2017-08-06兼容各种浏览器篡位的css样式写法分享
  • 2017-08-06css控制文本实现越界省略号以及自动换行
  • 2017-08-06使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解CSS中的几种长度px、em、pt
    • 纯CSS实现鼠标移动切换图片示例
    • CSS3正方体旋转示例代码
    • 利用CSS3实现平移动画效果示例代码
    • css FF与IE兼容性总结
    • CSS中的选择器种类总结及效率比较
    • 父元素的高度为0利用伪元素:after清除浮动可解决问题
    • 通过绝对定位实现div重叠实例代码
    • CSS字体中英文名称对照表 CSS常用中文字体英文名称对照表
    • css padding属性兼容ie6,ie8,firefox实例详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有