文本溢出：省略号无法在 IE 和 Edge 中对所有行进行预标记或空白预文本

Question

In IE, text-overflow: ellipsis is not working for <pre> tag text and white-space: pre text.在 IE 中， text-overflow: ellipsis不适用于<pre>标签文本和white-space: pre文本。 Only for the first line, it is working fine and for the rest of the lines, it is not working in the Chrome browser, it is working fine for all the browsers.仅对于第一行，它工作正常，而对于其余行，它在 Chrome 浏览器中不起作用，它适用于所有浏览器。

 .myText { white-space: pre; color: blue; -ms-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Angular Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div > <div class="container"> <h1>Pre Tag or Pre Text with Textoverlow ellipsis:</h1> <div style="WIDTH: 100PX;"> <div class="myText">print "Hello world, how are you doing today? Is this getting cut off yet? Hello world, how are you doing today? </div> </div> </div> </body> </html>

Answer 1

Add span to every single new line.为每个新行添加span 。

JSFiddle JSFiddle

 .myText span { white-space: pre; text-overflow: ellipsis; overflow: hidden; color: blue; display: block; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div class="container"> <h1>Pre Tag or Pre Text with Textoverlow ellipsis:</h1> <div style="WIDTH: 100PX;"> <div class="myText"> <span>print "Hello world, how are you doing today?</span> <span>Is this getting cut off yet?</span> <span>Hello world, how are you doing today?</span> </div> </div> </div>

文本溢出：省略号无法在 IE 和 Edge 中对所有行进行预标记或空白预文本

问题描述

1 个解决方案

解决方案1
-1 2019-03-15 09:13:24

文本溢出：省略号无法在 IE 和 Edge 中对所有行进行预标记或空白预文本

问题描述

1 个解决方案

解决方案1 -1 2019-03-15 09:13:24

解决方案1
-1 2019-03-15 09:13:24