(每日一题)面试官:如何实现单行/多行文本溢出的省略样式?

(每日一题)面试官:如何实现单行/多行文本溢出的省略样式?_第1张图片

一、前言

在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号

对于文本的溢出,我们可以分成两种形式:

  • 单行文本溢出
  • 多行文本溢出

二、实现方式

单行文本溢出省略

理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现

实现方式也很简单,涉及的css属性有:

  • text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
  • white-space:设置文字在一行显示,不能换行
  • overflow:文字长度超出限定宽度,则隐藏超出的内容

overflow设为hidden,普通情况用在块级元素的外层隐藏内部溢出元素,或者配合下面两个属性实现文本溢出省略

white-space:nowrap,作用是设置文本不换行,是overflow:hiddentext-overflow:ellipsis生效的基础

text-overflow属性值有如下:

  • clip:当对象内文本溢出部分裁切掉
  • ellipsis:当对象内文本溢出时显示省略标记(…)

text-overflow只有在设置了overflow:hiddenwhite-space:nowrap才能够生效的

举个例子

<style>
    p{
     
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
style>

p >

效果如下:

在这里插入图片描述

可以看到,设置单行文本溢出较为简单,并且省略号显示的位置较好

多行文本溢出省略

多行文本溢出的时候,我们可以分为两种情况:

  • 基于高度截断
  • 基于行数截断
基于高度截断
伪元素 + 定位

核心的css代码结构如下:

  • position: relative&

你可能感兴趣的:(css面试题,前端,javascript,css)