переполнение текста: многоточие не работает, чтобы предварительно пометить или пробел предварительно текст все строки в IE & Edge - PullRequest
Новая
       8

переполнение текста: многоточие не работает, чтобы предварительно пометить или пробел предварительно текст все строки в IE & Edge

0 голосов
/ 15 марта 2019

В IE text-overflow: ellipsis не работает для <pre> текста тега и white-space: pre текста. Только для первой строки он работает нормально, а для остальных строк он не работает в браузере Chrome, он работает нормально для всех браузеров.

enter image description here

.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 Ответ

0 голосов
/ 15 марта 2019

Добавьте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...