文字超出div,设置text-overflow:ellipsis不起作用问题

问题描述

单行文字长度超过文本框width值导致换行问题,在设置了overflow : hidden; text-overflow: ellipsis; 仍不起作用

文字超出div,设置text-overflow:ellipsis不起作用问题_第1张图片

环境:Google浏览器

解决方法

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

CSS 代码
<style type="text/css">
.hideText{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    word-break: break-all;  /* 内容自动换行 */
}
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').attr("title",ds.dsName).html(ds.dsName);           
        });
    }
script>

效果

文字超出div,设置text-overflow:ellipsis不起作用问题_第2张图片

注:word-wrap:break-word; 和 word-break:break-all; 的区别
两者都能使容器内的文本内容自动换行, word-break 可能的话,如行未的英文单词过长,需要词内换行, word-wrap 英语句子中单词内不强制换行,会将该单词放到下一行,而不会把单词截断。



参考:
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

你可能感兴趣的:(HTML)