<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 1px solid;
                margin: 0 auto;
                direction: rtl;
                unicode-bidi: bidi-override;
            }
        </style>
    </head>
    <body>
        <div>真不错</div>
    </body>
</html>

white-space 换行属性

规定段落中的文本不进行换行：

p
  {
  white-space: nowrap
  }

text-overflow

确定如何向用户发出未显示的溢出内容信号。

div.test
{
text-overflow:ellipsis;
}

clip 修剪文本。

ellipsis 显示省略符号来代表被修剪的文本。

string 使用给定的字符串来代表被修剪的文本。

多出内容省略号显示

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid;
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
</head>
<body>
    <div>真不错真不错真不错真不错真不错真不错真不错真不错真不错真不错真不错</div>
</body>
</html>

posted on 2021-07-05 20:12 leiyanting 阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

导航

white-space 换行属性

text-overflow