06CSS文本——text-overflow

远近2021

已于 2022-05-06 15:40:24 修改

阅读量422

点赞数

分类专栏： htmlcss学习园地 # css3学习文章标签： css3

于 2021-09-30 00:07:42 首次发布

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119606409

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 6 订阅

订阅专栏

css3学习

25 篇文章 3 订阅

订阅专栏

文章目录

1、text-overflow
2、限制字符串显示长度
3、控制文本显示的行数

1、text-overflow

文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值：

clip ：修剪文本。
ellipsis ：显示省略符号来代替被修剪的文本。
string ：使用给定的字符串来代替被修剪的文本。（只在firefox浏览器有效）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .item1 {
            white-space: nowrap;
            border: 1px solid;
            width: 150px;
            overflow: hidden;
            text-overflow: clip;
        }
        .item2 {
            white-space: nowrap;
            border: 1px solid;
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

          .item3{
              white-space: nowrap;
              border: 1px solid;
              width: 150px;
              overflow: hidden;
              text-overflow: "i'm string";
          }
          /*字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持，大部分浏览器都不支持该溢出替换方式。*/

    </style>
</head>
<body>
    <div class="item1">hhhhhhhhhhhhhhhhhhhhhhhhlzy</div>
    <div class="item2">hhhhhhhhhhhhhhhhhhhhhhhhlzy</div>
     <div class="item3">hhhhhhhhhhhhhhhhhhhhhhhhlzy</div>
</body>

Chrom下的效果：
在这里插入图片描述
item1 中溢出的文本直接被截断，文本框边缘还出现了截断一半的 h 字母，因为 text-overflow 设置为 clip ；item2 中溢出的文本采用省略号代替，因为 text-overflow 设置为了 ellipsis。字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持，大部分浏览器都不支持该溢出替换方式。

FireFox下的效果：
在这里插入图片描述

2、限制字符串显示长度

<div style="width:50px;
text-overflow:ellipsis;
overflow:hidden;
white-space: nowrap;">
超出部分显示...超出部分显示...超出部分显示..
.</div>

3、控制文本显示的行数

    -webkit-line-clamp: 2;//只显示2行
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;

远近2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06CSS文本——text-overflow

文本框经常会出现文本溢出的情况，在只有单行文本框，文本又出现溢出的情况，这时候就需要 text-overflow 来处理这些溢出的文本了。text-overflow 有三个取值：clip ：修剪文本。ellipsis ：显示省略符号来代替被修剪的文本。string ：使用给定的字符串来代替被修剪的文本。<head> <meta charset="UTF-8"> <title>Title</title> <style t
复制链接

扫一扫