text-overflow: ellipsis; 为什么IE11不显示省略号呢？

完整代码如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>text-overflow</title>
        <style type="text/css">
            p
            {
                margin: 10px auto;
                width: 700px;
                font-size: 1.8rem;
                background-color: #ABCDEF;
                overflow: hidden;
                white-space: nowrap;
            }

            p:nth-child(1)
            {
                -ms-text-overflow: clip;
                text-overflow: clip;
            }

            p:nth-child(2)
            {
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
            }

            p:nth-child(3)
            {
                -ms-text-overflow: '>>';
                text-overflow: '>>';
            }

            p:nth-child(4)
            {
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
            }

            p > span
            {
                color: red;
            }
        </style>
    </head>

    <body>
        <p>
            <span>text-overflow: clip;</span><br>
            Viola Desmond was an African Canadian woman from Nova Scotia.
            She lived in a time when black women were expected to be servants in houses,
            and black men were expected to be servants on trains.
        </p>

        <p>
            <span>text-overflow: ellipsis;</span><br>
            Viola Desmond was an African Canadian woman from Nova Scotia.
            She lived in a time when black women were expected to be servants in houses,
            and black men were expected to be servants on trains.
        </p>

        <p>
            <span>text-overflow: '>>';</span><br>
            Viola Desmond was an African Canadian woman from Nova Scotia.
            She lived in a time when black women were expected to be servants in houses,
            and black men were expected to be servants on trains.
        </p>

        <P>
            <span>multi-lines content & text-overflow: ellipsis</span><br>
            Viola Desmond was an African Canadian woman from Nova Scotia.
            She lived in a time when black women were expected to be servants in houses,
            and black men were expected to be servants on trains.
            From a young age, Viola dreamed of having her own business.
            By 1946, she was making her dreams come true.
            Viola was only 32, yet she had her own beauty salon.
            She had set up a school to train other black women to work in the beauty business.
            She also had her own line of beauty products.
            <br>
            One day, she was driving across Nova Scotia to make a delivery.
            But then her car broke down in New Glasgow.
            She decided to go see a movie while she waited for her car to be fixed.
            She went to the Roseland Theatre. It was a brick building with a big sign that lit up at night.
            She paid for a ticket and went inside. The theatre had a main floor and a balcony.
            Viola sat on the main floor because her eyesight was poor and she needed to be close to the screen.
            <br>
            Just as the movie started to play, she felt a tap on her shoulder.
            A staff person told her she could not sit there. Her ticket was for the balcony.
            Viola went back to the ticket booth. She asked for a ticket for the main floor.
            The ticket seller said, “We don’t sell tickets on the main floor to you people.”
            That’s when she realized that the balcony was for black people. The main floor was for white people.
            Viola said that she could not see from the balcony.
            She put the extra money for a main floor ticket on the counter.
            The ticket seller would not take it, but she went back to her seat anyway.
            <br>
            That’s when the manager came in. He told her to move to the balcony, or he would call the police.
            Viola told him to go ahead. She wasn’t moving. She was doing nothing wrong.
            Sure enough, the police came. They asked her one more time to move. Viola said no.
            So the police grabbed her by the arms and took her from the theatre.
            They had to drag her. “I just sort of went limp,” Viola said. “I wasn’t going to make it easy for them.”
            <br>
            The police took Viola to prison. She sat up awake the whole night.
            The next day, she was taken to court.
            Nobody had told her she could call a lawyer, so she had to argue for herself.
            She didn’t know how courtrooms worked, and she was found guilty.
            <br>
            Her husband begged her to forget about what had happened and move on.
            But Viola bravely took the case back to court. Sadly, she lost once more.
            But Viola’s case brought many people together to fight for equal rights in Nova Scotia.
            They kept up the battle and in 1954,
            the province finally got rid of the laws that made it legal to treat black people differently from white people.
            <br>
            People of colour are now equal under the laws of Canada.
            However, racism is alive in many Canadians’ hearts and minds.
            Viola’s story invites us to ask: What can we do to make sure that history does not repeat itself?
        </P>
    </body>

</html>

在Chrome、Firefox、Opera、Edge中都能够显示预期效果，没有问题，截图如下。

【1】Chrome

【2】Firefox

【3】Opera

【4】Edge

在以上4种浏览器的显示效果中，第2段和第4段文字的截断处都显示省略号，

那是因为设置了text-overflow: ellipsis; 没有问题。

但是在IE 11中，却不显示省略号，效果为clip，如下图所示。

我的IE版本为11.295.18362.0

查阅MDN官网：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

发现IE6+就应该支持text-overflow属性了，而我的是IE 11，按理说应该不存在兼容性问题。

但是不知道为什么，IE效果不显示省略号。

我学习太差被关起来了 2019-08-17

源自：CSS3文本与字体 1-6 新文本属性（text-align-last和text-overflow）

收起

3回答

好帮手慕慕子回答被采纳获得+3积分 2019-08-19 10:15:45

同学你好，从你自己测试的结果看，也可以发现，文字间有换行符的时候，在IE浏览中， br标签会影响text-overflow：ellipsis属性实现的效果。

同学如果想要实现前三行完整显示，最后一行文字溢出显示省略号，在火狐，谷歌上可以参考如下写法

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
p,
div {
margin: 10px auto;
width: 700px;
font-size: 26px;
background-color: #ABCDEF;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
span {
color: red;
}
.box {
/*下面这个三个属性结合使用 */
/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 设置或检索伸缩盒对象的子元素的排列方式  */
-webkit-box-orient: vertical;
/* 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性 */
-webkit-line-clamp: 4;
overflow: hidden;
white-space: normal;
}

</style>
</head>
<body>
<div class="box">
<span>text-overflow: ellipsis;</span>
<br> Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
<br> One day, she was driving across Nova Scotia to make a delivery. But then her car broke down in New Glasgow.
<br> Just as the movie started to play, she felt a tap on her shoulder. A staff person told her she could not sit there. Her ticket was for the balcony.
<br> That's when the manager came in. He told her to move to the balcony, or he would call the police. Viola told him to go ahead. She wasn’t moving. She was doing nothing wrong.
</div>
</body>

</html>

如果要兼容IE的话，需要通过JS实现，老师这里使用jQuery给同学做一个示例，同学可以先了解一下。

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
p,
div {
margin: 10px auto;
width: 700px;
font-size: 26px;
background-color: #ABCDEF;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
span {
color: red;
}
.box {
/*下面这个三个属性结合使用 */
/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 设置或检索伸缩盒对象的子元素的排列方式  */
-webkit-box-orient: vertical;
/* 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性 */
-webkit-line-clamp: 4;
overflow: hidden;
white-space: normal;
position: relative;
line-height: 1.5;
}
.wrap:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #ABCDEF 55%);
background: -moz-linear-gradient(left, transparent, #ABCDEF 55%);
background: -o-linear-gradient(left, transparent, #ABCDEF 55%);
background: linear-gradient(to right, transparent, #ABCDEF 55%);
}

</style>
</head>

<body>
<div class="box wrap">
<span>text-overflow: ellipsis;</span>
<br> Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
<br> One day, she was driving across Nova Scotia to make a delivery. But then her car broke down in New Glasgow.
<br> Just as the movie started to play, she felt a tap on her shoulder. A staff person told her she could not sit there. Her ticket was for the balcony.
<br> That's when the manager came in. He told her to move to the balcony, or he would call the police. Viola told him to go ahead. She wasn’t moving. She was doing nothing wrong.
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 获取每行的行高
var lineHeight = parseInt($('.box').css('line-height'))
// 获取外层盒子的高度
var height = parseInt($('.box').css('height'))

if ((height / lineHeight) > 5) {
$('.box').addClass("wrap")
$('.box').css("height", "156px");
console.log($(this))
} else {
$('.box').removeClass("wrap");
}
</script>
</body>

</html>

效果图：

老师上一条回答中，没有指出br对text-overflow属性的影响，不是很严谨，感谢同学的提醒，老师以后回答会更加严谨一点的

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

我学习太差被关起来了提问者 #1

好的，谢谢老师耐心的解答，我先把它记下来。

2019-08-19 22:26:42
向学习者学习回复提问者我学习太差被关起来了 #2

感谢，学到了。

2023-05-09 17:37:53

提问者我学习太差被关起来了 2019-08-18 20:26:14

完整代码如下：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>text-overflow的IE兼容性</title>
        <style type="text/css">
            p,
            div
            {
                margin: 10px auto;
                width: 700px;
                font-size: 26px;
                background-color: #ABCDEF;

                overflow: hidden;
                white-space: nowrap;
                -ms-text-overflow: ellipsis;
                text-overflow: ellipsis;
            }

            span
            {color: red;}
        </style>
    </head>

    <body>
        <P>
            <span>text-overflow: ellipsis;</span>
            Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
        </P>
        <div>
            <span>text-overflow: ellipsis;</span>
            Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
        </div>
    </body>

</html>

以上代码在 IE 11 的显示效果如下：

可见，IE 11 是兼容 text-overflow: ellipsis; 的，没有问题。

【但是新的问题来了】【多行文本的溢出问题】

如果把HTML代码给成如下所示（添加4行文字，文字之间有换行符<br>）：

<P>
    <span>text-overflow: ellipsis;</span>
    <br>
    Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
    <br>
    One day, she was driving across Nova Scotia to make a delivery. But then her car broke down in New Glasgow.
    <br>
    Just as the movie started to play, she felt a tap on her shoulder. A staff person told her she could not sit there. Her ticket was for the balcony.
    <br>
    That's when the manager came in. He told her to move to the balcony, or he would call the police. Viola told him to go ahead. She wasn’t moving. She was doing nothing wrong.
</P>
<div>
    <span>text-overflow: ellipsis;</span>
    <br>
    Viola Desmond was an African Canadian woman from Nova Scotia. She lived in a time when black women were expected to be servants in houses, and black men were expected to be servants on trains.
    <br>
    One day, she was driving across Nova Scotia to make a delivery. But then her car broke down in New Glasgow.
    <br>
    Just as the movie started to play, she felt a tap on her shoulder. A staff person told her she could not sit there. Her ticket was for the balcony.
    <br>
    That's when the manager came in. He told her to move to the balcony, or he would call the police. Viola told him to go ahead. She wasn’t moving. She was doing nothing wrong.
</div>

其他部分代码不变，那么在IE 11中显示效果如下，这时候就不出现省略号了。

这时，多行文本溢出时需要显示省略号，该如何解决呢？

我希望文章的前3行文字内容能够完整显示，不受影响。而最后一行（That's when the manager...）文字放不下时末尾显示省略号。

收起回答

好帮手慕慕子 2019-08-18 13:45:39

同学你好，老师测试了，因为text-overflow存在兼容性，浏览器可能对该属性支持向不好，所以同学写的这这段代码在IE上没有省略号，

在IE上text-overflow属性可以针对div标签生效，对p标签没有效果。示例：

效果图： div标签设置text-overflow属性时生效的

老师测试的ie版本是是IE11

这种存在兼容性问题的属性，我们使用的时候，需要针对该属性对布局做出适当的调整。例如：同学想要使用text-overflow属性实现省略的效果，但同时也要兼容IE, 那么就可以将p标签换成div标签哦

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

提问者我学习太差被关起来了 #1

对于老师通过举例得出的结论：“在IE上text-overflow属性可以针对div标签生效，对p标签没有效果”，我不同意。经过测试，在IE上，text-overflow对<div>和<p>标签都是生效的，代码我随后发上来。

2019-08-18 20:06:51