[CSS]CSS换行问题

最新推荐文章于 2024-07-25 21:38:25 发布

leo_howl

最新推荐文章于 2024-07-25 21:38:25 发布

阅读量585

点赞数

分类专栏：文章文章标签： css

本文链接：https://blog.csdn.net/u013050330/article/details/102988045

版权

文章专栏收录该内容

12 篇文章 0 订阅

订阅专栏

强制不换行 white-space:nowrap

white-space 属性设置如何处理元素内的空白。
属性[ http://www.w3school.com.cn ]：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

自动换行 word-wrap:break-word

当长单词或网页地址一行无法显示的时候在下一行显示。
属性[ http://www.w3school.com.cn ]：

值	描述
normal	默认。只在允许的断字点换行。
pre	在长单词或 URL 地址内部进行换行。

强制断行 word-break:break-all

word-break 属性规定自动换行的处理方法
属性[ http://www.w3school.com.cn ]：

值	描述
normal	默认。使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

超出内容显示省略号 text-overflow:ellipsis

text-overflow 属性规定当文本溢出包含元素时发生的事情。
属性[ http://www.w3school.com.cn ]：

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

**注意：**ellipsis只对单行文本生效，且容器overflow:hidden。

点击查看测试页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css换行</title>
    <style>
        .lists{
            width: 400px;
            height: auto;
            margin: 50px auto;
            padding: 20px;
            font-size: 14px;
            line-height: 1.6em;
            font-family: 'Microsoft YaHei Light';
        }
        .list{
            width: 100%;
            height: auto;
            padding: 5px;
            border-radius: 3px;
            border: #aaa 1px solid;
            background: #fafafa;
            margin:0 0 25px;
            text-indent: 2em;
        }
        small{
            font-size: 14px;
            color: #aaa;
            font-weight: bold;
            line-height: 1em;
        }
        .nowrap{
            white-space:nowrap;
        }
        .break-word{
            word-wrap:break-word;
        }
        .break-all{
            word-break:break-all;
        }
        .ellipsis{
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
            height: 20px;
        }
    </style>
</head>
<body>
<div class="lists">
    <small>white-space:nowrap</small>
    <div class="list nowrap">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div>
    <small>word-wrap:break-word</small>
    <div class="list break-word">Finally, he found another field where he could hide．He lay down, unable to sleep, his mind filled with visions of the dead girl. Her wide, dead eyes stared at him, watching him through a curtain of blood.</div>
    <small>word-break:break-all</small>
    <div class="list break-all">Finally, he found another field where he could hide．He lay down, unable to sleep, his mind filled with visions of the dead girl. Her wide, dead eyes stared at him, watching him through a curtain of blood.</div>
    <small>text-overflow:ellipsis</small>
    <div class="list ellipsis">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div>
    <small>normal</small>
    <div class="list normal">我说道，“爸爸，你走吧。”他望车外看了看，说，“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。</div>
</div>
</body>
</html>

leo_howl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[CSS]CSS换行问题

强制不换行 white-space:nowrapwhite-space 属性设置如何处理元素内的空白。属性[ http://www.w3school.com.cn ]：值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到标签为止。...
复制链接

扫一扫