Question

在IE中，text-overflow: ellipsis对<pre>标签文本和white-space: pre文本无效。仅对于第一行，它可以正常工作，而对于其余各行，它不能在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

在每个新行中添加span。

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 个答案: