Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS 换行的那些事儿 #33

Open
paddingme opened this issue Jan 17, 2015 · 0 comments
Open

CSS 换行的那些事儿 #33

paddingme opened this issue Jan 17, 2015 · 0 comments
Labels
CSS

Comments

@paddingme
Copy link
Owner

同步更新于博客： CSS 换行的那些事儿

一个导航栏引发的血案

周五做一个二级导航栏，需要的效果如图所示，

写的代码是：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>
    <style>
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .nav li a:hover {
            background: lightsteelblue;
        }
        .nav li {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            position: relative;
            padding-bottom: 20px;
            border: 1px solid red;
        }
        .nav li a {
            padding: 10px;
            background: aliceblue ;
            margin-right: -8px;
            border-right: 1px solid #fff;

        }
        .nav li:hover .second-column {
            visibility: visible;
            border: 1px solid blue;
        }
        .second-column {
            visibility: hidden;
            position: absolute;
            top: 37px;
            left: 0;
        }
        .nav .second-column a {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">一级栏目</a></li>
        <li>
            <a href="">一级栏目</a>
            <div class="second-column">
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目</a>
            </div>
        </li>
        <li>
            <a href="">一级栏目</a>
            <div class="second-column">
                <a href="">二级栏目二级栏目二级栏目</a>
                <a href="">二级栏目</a>
                <a href="">二级栏目二级栏目二级栏目</a>
                <a href="">二级栏目</a>
            </div>
        </li>
        <li><a href="">一级栏目</a></li>
    </ul>
</body>
</html>

得到的效果是：

在线 DEMO: http://codepen.io/paddingme/pen/QwvLBO

发现二级导航栏所在的区域和一级导航栏 li 区域宽度一样，无法全部水平拜访。

折腾了半天，研究了半天，差点于屏幕前吐血身亡。最后发现加了句 white-space: nowrap; 就轻松搞定了。

在线 DEMO: http://codepen.io/paddingme/pen/RNVbBr

猜测是 绝对定位的元素根据其定位的父元素进行定位，默认情况下不限制宽度的情况下，绝对定位元素会自动折行，不超过其定位的父元素的宽度区域。

这里我们使用 white-space: nowrap 强制不换行得到所需要效果。

white-space

实现强制不换行

div {
    white-space：nowrap;
}

语法： white-space：normal | pre | nowrap | pre-wrap | pre-line

查看了 MDN（还翻译了下，感觉翻译得好差，见笑=.=）和 CSS参考手册。
总结下各个取值的用法是：

  • normal : 浏览器默认情况下 white-space 即为 normal, 表现为连续的空白符会被合并为一个空格，制表符、换行符都是空白符。当遇到盒子边界或者 <br> 就会换行。
  • pre: 连续的空白符不会被合并。
  • nowrap: 强制文本不换行，除非遇到<br>。
  • pre-wrap: 连续的空白符不会被合并, 遇到盒子边界或者 <br> 就会换行。
  • pre-line: 连续的空白符不会被合并,保持文本的换行,遇到盒子边界或者 <br> 就会换行。

注：IE7及更早浏览器不支持 CSS2.1 新增的 pre-wrap | pre-line。

word-wrap & word-break

CSS 自动换行

div {
    word-wrap: break-word;
    word-break: normal;
}

word-wrap：normal | break-word

  • normal： 允许内容顶开或溢出指定的容器边界。
  • break-word： 内容将在边界内换行。如果需要，单词内部允许断行。

设置或检索当内容超过指定容器的边界时是否断行。
作为 IE 的私有属性之一，IE5.5 率先实现了 word-wrap ，后期被w3c采纳成标准属性；
CSS3 中将 word-wrap 改名为 overflow-wrap；
对应的脚本特性为 wordWrap。

word-break 是用来在单词内断行。

word-break：normal | keep-all | break-all

  • normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
  • keep-all： 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
  • break-all： 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

设置或检索对象内文本的字内换行行为。注意 FireFox 早起版本不识别 word-break,需要 hack。
对于解决防止页面中出现连续无意义的长字符打破布局，应该使用 break-all；
作为 IE 的私有属性之一，IE5.5 率先实现了 word-break ，后期被w3c采纳成标准属性；
对应的脚本特性为 wordBreak。

参考：

css 实现省略号

div {
    width: 27em;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

注意 text-overflow: ellipsis 在 Firefox 下 无效，可以用其他方法 hack，例如

/* FF 下的样式 */
p {clear:both;}
p span {
float:left;
    max-width:175px;   /*IE不能解释该属性，而FF可以*/
}
p:after {
    content:"...";
}

参考：
@paddingme paddingme changed the title css 换行的那些事儿 CSS 换行的那些事儿 Jan 19, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@paddingme