Skip to content

Instantly share code, notes, and snippets.

@pygman
Created September 2, 2016 10:06
Show Gist options
  • Save pygman/09aa07a8e2dac33348b869b0b3631738 to your computer and use it in GitHub Desktop.
Save pygman/09aa07a8e2dac33348b869b0b3631738 to your computer and use it in GitHub Desktop.
文字和布局换行多种效果 HTML和css笔记

在web前端技术中,换行标签的使用非常频繁。换行最普通的用法是使用“
“标签,但是,在有些倩况下此标签会失去换行功能,因此达不到页面效果展示。所以,在制作页面时,可以使用css样式来实现换行功能。


  1. 标签的使用 这个标签的使用没什么技术含量,直接使用就可以,只要不是什么大的问题,通常情况下可以正常使用。

  2. 如何让title中的内容实现换行效果? 比如,让a标签中的title属性内容达到换行效果,有三种方法使用:回车、符号一、符号二。 2.1 回车这种方法就不占用篇幅解释了,顾名思义就是键盘上的回车键,直接使用就可以让title属性中的内容达到换行的效果。 Web前端技术 文字和布局换行多种效果 HTML和css笔记 2.2 符号换行 有两种符号有这样的功效:“ ”和“ ”。符号换行的用法和
    的用法相似。 示例:

  3. css换行效果 css是定义页面格局的样式元素。通常HTML的效果不如愿或者实现不了的技术时,就会使用到css样式。必经现在网站技术已经有了很大的进步。 3.1 div同行显示效果用法 div 标签默认的宽度是100%,也就是占据一行的宽度。要想设置div的换行效果,需要附加float和display两个元素。

    • float用法是float:left,css样式写法是sanlongxin{float:left}
    • display用法是display:inline,css样式写法是:sanlongxin{display:inline} Web前端技术 文字和布局换行多种效果 HTML和css笔记 3.2 自定义高度、宽度,文字自动换行技术 word-wrap:break-word
    • break-word时,是将强制换行。
    • 兼容各版本IE浏览器,兼容谷歌浏览器。 Web前端技术 文字和布局换行多种效果 HTML和css笔记

这次分享的web前端技术是换行,也许还有更多方法。这里我分享了三种换行方法:HTML标签换行、符号换行、css换行。下次分享再见。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment