input文本溢出显示省略号

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input文本溢出显示省略号相关的知识，希望对你有一定的参考价值。

参考技术A 1、css有input超出文本显示省略号的样式：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

但是这种方式实现有两个弊端：
1）不能实现：文本没有溢出不显示title,只有当文本溢出时才显示title
2）当文本输入框disabled状态时，鼠标仍可拖动input内文本，拖动幅度较大时，输入框显示为空白

2、采用jQuery/Js实现文本溢出显示省略号方式
var resultName = 0; //定义全局变量
//使用
resultName = 0;
var copyPageElement = ("<pre>" + name + "</pre>").css( display: 'none' );//定义和页面上input元素文本一致的元素，并且设置dispaly:'none'，即元素宽度显示所有文本
$("body").append(trueEle);
if (currWidth < trueEle.width()) //实际宽度小于全显示宽度
trueEle.text(trueEle.text().substring(0, trueEle.text().length - 3));
resultName = trueEle.text()+"....";
trueEle.remove();
return getAdaptingName(trueEle.text(), currWidth);//开始递归，直到trueEle元素的宽度不大于currWidth
else
trueEle.remove();
if (resultName !== 0)
return resultName;
else
return name;

文本溢出截断省略

文本溢出截断省略是比较常见的业务场景，主要分为单行文本溢出截断省略与多行文本溢出截断省略，单行的截断方案比较简单，多行截断相对比较复杂。

单行溢出省略

单行文本溢出截断省略直接使用CSS即可，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是只能作为单行文本溢出截断省略的解决方案。

<section>
    <div class="t1">很长很长很长很长很长很长很长很长的文本</div>
    <div class="t1">不很长的文本</div>
</section>
<style type="text/css">
    .t1{
        white-space: nowrap; /* 文字在一行显示不能换行 */
        overflow: hidden; /* 文字长度超出限定宽度则截断 */
        text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
    }
</style>

多行溢出省略

按行计算 CSS方案

多行文本溢出截断省略按行计算使用CSS，其文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是兼容性一般，line-clamp属性只有WebKit内核的浏览器才支持,多适用于移动端页面，因为移动设备浏览器更多是基于WebKit内核。

<section>
    <div class="t2">不很长的文本</div>
    <div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<style type="text/css">
    .t2{
        -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 兼容性 https://caniuse.com/#search=line-clamp */
        display: -webkit-box; /* 显示为弹性伸缩盒子模型 */
        box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
        overflow: hidden; /* 文字长度超出限定宽度则截断 */
        text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
    }
</style>

按行计算 Js方案

多行文本溢出截断省略按行计算使用Js，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但是需要Js实现，背离展示和行为相分离原则，文本为中英文混合时，省略号显示位置略有偏差。

<section>
    <div class="t3">不很长的文本</div>
    <div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<script type="text/javascript">
    (function(){
        var lineNum = 3;
        var elements = document.getElementsByClassName("t3");
        Array.prototype.forEach.call(elements, element => {
            var text = element.innerText;
            var textLen = text.length;
            var baseWidth = window.getComputedStyle(element).width;
            var fontsize = window.getComputedStyle(element).fontSize;
            var lineWidth = baseWidth.slice(0, -2);
            var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数
            var content = "";
            var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数
            var lastIndex = totalStrNum - textLen;
            if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat(‘...‘);
            else content = text;
            element.innerText = content;
        })
    })();
</script>

按高度计算 CSS方案

多行文本溢出截断省略按高度计算使用CSS，利用Float的浮动，通过::before与::after两个伪元素实现浮动操作，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但省略号显示可能不会刚刚好，有时会遮住一半文字。

<section>
    <div class="t4">
        <div class="text">不很长的文本</div>
    </div>
    <div class="t4">
        <div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
    </div>
</section>
<style type="text/css">
    .t4 {
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .t4::before{
        float: left;
        content:"";
        width: 20px;
        height: 40px;
    }
    .t4 .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .t4::after{
        float:right;
        background-color: #fff;
        content:‘...‘;
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

代码示例

<!DOCTYPE html>
<html>
<head>
    <title>文本溢出截断省略</title>
    <style type="text/css">
        #container{
            width: 300px;
            border: 1px solid #eee;
            position: relative;
        }
        section{
            padding: 5px 0;
            margin: 5px;
            border-bottom: 1px solid #eee;
        }
        .t1{
            white-space: nowrap; /* 文字在一行显示不能换行 */
            overflow: hidden; /* 文字长度超出限定宽度则截断 */
            text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
        }
        .t2{
            -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
            display: -webkit-box; /* 显示为弹性伸缩盒子模型 */
            -webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
            overflow: hidden; /* 文字长度超出限定宽度则截断 */
            text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
        }
        .t4 {
            max-height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .t4::before{
            float: left;
            content:"";
            width: 20px;
            height: 40px;
        }
        .t4 .text {
            float: right;
            width: 100%;
            margin-left: -20px;
            word-break: break-all;
        }
        .t4::after{
            float:right;
            background-color: #fff;
            content:‘...‘;
            width: 20px;
            height: 20px;
            position: relative;
            left:100%;
            transform: translate(-100%,-100%);
        }
    </style>
</head>
<body>

    <div id="container">
        <section>
            <div class="t1">不很长的文本</div>
            <div class="t1">很长很长很长很长很长很长很长很长的文本</div>
        </section>

        <section>
            <div class="t2">不很长的文本</div>
            <div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
        </section>

        <section>
            <div class="t3">不很长的文本</div>
            <div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
        </section>

        <section>
            <div class="t4">
                <div class="text">不很长的文本</div>
            </div>
            <div class="t4">
                <div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
            </div>
        </section>
    </div>


</body>
<script type="text/javascript">
    (function(){
        var lineNum = 3;
        var elements = document.getElementsByClassName("t3");
        Array.prototype.forEach.call(elements, element => {
            var text = element.innerText;
            var textLen = text.length;
            var baseWidth = window.getComputedStyle(element).width;
            var fontsize = window.getComputedStyle(element).fontSize;
            var lineWidth = baseWidth.slice(0, -2);
            var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数
            var content = "";
            var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数
            var lastIndex = totalStrNum - textLen;
            if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat(‘...‘);
            else content = text;
            element.innerText = content;
        })
    })();
</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b

以上是关于input文本溢出显示省略号的主要内容，如果未能解决你的问题，请参考以下文章

单行文本溢出显示省略号.多行文本溢出显示省略号

文本溢出省略号不适用于 Firefox 中 <input type='file' /> 中选定的文件名。请提出解决方案

实现单行或多行文本溢出显示省略号

多行文本溢出显示省略号

文本溢出截断省略