GitHub 博客园 Nanakon

【CSS】

12个很少被人知道的CSS事实

通过CSS禁止Chrome自动为输入框添加橘黄色边框
http://www.solagirl.net/override-chromes-automatic-border-around-active-fields-using-css.html

text-transform

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1{text-transform:uppercase;}
        h2{text-transform:lowercase;}
        h3{text-transform:capitalize;}
    </style>
</head>
<body>
    <h1>abcdEFG</h1>
    <h2>abcdEFG</h2>
    <h3>abcdEFG</h3>
</body>
</html>

white-space, word-wrap

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box1 {
            width: 100px;
            background: #ddd;
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行。当文字碰到边界时发生换行 */
        }
        .box2 {
            width: 100px;
            background: #ddd;
            white-space: pre-line; /* 合并空白符序列，但是保留换行符。当文字碰到边界时发生换行 */
            word-wrap:break-word; /* 在长单词或 URL 地址内部进行换行 */
        }
        .box3 {
            width: 100px;
            background: #ddd;
            white-space: nowrap; /* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
        }
        .box4 {
            background: #ddd;
            white-space: pre; /* 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。当文字超出边界时不换行 */
        }
    </style>
</head>
<body>
<div>1111    1 111   11111111111   11111   111111111111
22
33</div>
<div class="box1">1111    1 111   11111111111   11111   111111111111
22
33</div>
<div class="box2">1111    1 111   11111111111111111   11111   111111111111
22
33</div>
<div class="box3">1111    1 111   11111111111   11111   111111111111
2<br>2
33</div>
<div class="box4">1111    1 111   11111111111   11111   111111111111
22
33</div>
</body>
</html>

 

posted on 2013-08-01 21:44  jzm17173  阅读(194)  评论(0)    收藏  举报

导航

轻音