text-overflow: ellipsis is not working to pre tag or white-space pre text all lines in IE & Edge
Question
In IE, text-overflow: ellipsis is not working for <pre> tag text and white-space: pre text. 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.
.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>
1 answers
solution1
-1 2019-03-15 09:13:24
Add span to every single new line.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; not working inside fieldset?
CSS Transition not working with white-space: nowrap and text-overflow: ellipsis when hover
in mobile devices, white-space:nowrap; overflow:hidden; text-overflow:ellipsis; kinda do not work
Two Div's next to each other with “text-overflow: ellipsis; overflow: hidden; white-space: nowrap;”
text-overflow ellipsis dots not showing in IE & Edge browsers if we have br tag
text-overflow: ellipsis not working
text-overflow as ellipsis not working
white-space: pre-wrap not working in IE
text-overflow: ellipsis is not working for input in IE but working fine in other
Text-Overflow Ellipsis not working for multi-lines in Firefox and IE browsers
Related Tags