用word-break: break-all解决不正确换行问题
2014-11-27 15:56
295 查看
这个在新闻频道存在已久的问题,今天终于把它给解决了!
问题是这样的,当一段文字中有比较长的链接地址,会造成链接地址之前的文字不能正确换行,效果如下:
对应的html代码如下:
之前总是把解决问题的目标锁定在<p>,结果一直没解决。
今天把目标锁定到链接<a>上,很快就找到了解决方法,给<a>添加word-break:break-all的css定义即可。
效果如下:
问题是这样的,当一段文字中有比较长的链接地址,会造成链接地址之前的文字不能正确换行,效果如下:
对应的html代码如下:
<p> 如图所示,你可以自行选择列表,文本会自动进行更新。更多详细内容参见:<a href="https://github.com/github/task_list" target="_blank">https://github.com/github/task_list</a></p>
之前总是把解决问题的目标锁定在<p>,结果一直没解决。
今天把目标锁定到链接<a>上,很快就找到了解决方法,给<a>添加word-break:break-all的css定义即可。
#news_body a:link, #news_body a:visited, #news_body a:active { word-break: break-all; }
效果如下:
相关文章推荐
- word-break:break-all和word-wrap:break-word 自动换行问题
- firefox样式表cursor和兼容Ie firefox,解决文字溢出的问题(word-wrap:break-word;word-break:break-all)
- word-wrap:break-word与word-break:break-all的关系及强制换行与强制不换行问题
- td使用word-break: break-all;强制换行无效的解决
- usb-tooltip 重写.tooltip { word-break: break-all; }解决单词内换行
- css自动换行 word-break:break-all和word-wrap:break-word
- css强行换行 word-break:break-all和word-wrap:break-word 的区别
- 自动换行word-break:break-all和word-wrap:break-word的区别
- div自动换行word-break:break-all和word-wrap:break-word的区别
- FreeMarker导出word文件,\n换行无效的问题解决记录
- CSS 自动换行 word-break:break-all和word-wrap:break-word
- word-wrap同word-break的区别,字符串换行问题
- 解决break-word在Firefox无效的问题。
- div自动换行word-break:break-all和word-wrap:break-word的区别
- 解决Visio画图复制到word中格式不正确的问题
- 自动换行 word-break:break-all和word-wrap:break-word
- 段落自动换行问题: word-wrap: break-word;
- 自动换行word-break:break-all和word-wrap:break-word的区别
- 英文换行问题 css breakword
- FF 特有换行 类似于word-break:keep-all;