单行文字长度超过文本框width值导致换行问题

最新推荐文章于 2024-02-18 16:54:12 发布

joexk

最新推荐文章于 2024-02-18 16:54:12 发布

阅读量2.9k

点赞数

分类专栏： HTML 文章标签： HTML 文字溢出 CSS

本文链接：https://blog.csdn.net/zhouxukun123/article/details/71057075

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题描述

单行文字长度超过文本框width值导致换行问题。

这里写图片描述

需求

超过部分显示为省略号，鼠标悬浮文字上时显示全部文字。

解决方法

通过设置text-overflow: ellipsis;样式实现以省略号展现超出部分。

代码

<style type="text/css">
.hideText{
    text-overflow: ellipsis; // 文字溢出用省略号处理
    white-space: nowrap;
}
</style>

<body>
    <li class="clearfix g-mb10">
        <span class="txt-1">任务名称：</span>
        <span class="txt-2 hideText" id="preDsName"> style="width:200px;" </span>
    </li>
<body>

<script>
    $(document).ready(function(){
      init();
    });
    function init(){
        ...
        service.getDataSource(dsId, function(data){
            var ds = data.data;
            // 初始化界面
            $('#preDsName').html(ds.dsName);
            // 鼠标悬浮文字上时显示全部文字
            $('#preDsName').attr("title",ds.dsName);
        });
    }
</script>