Точки не появляются при переполнении - PullRequest
Новая
       23

Точки не появляются при переполнении

0 голосов
/ 06 июля 2018

У меня есть таблица со средней ячейкой, содержащей длинный текст. Ниже я нашел CSS, который теоретически должен предотвратить переполнение текста и добавить несколько точек в конце. Это предотвращает его переполнение, ОДНАКО там нет точек. Не могли бы вы помочь мне понять, почему?

Я бы хотел, чтобы это было так: длинный текст ... 

.headlinesStyle {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}

.headlinesStyle::selection {
  color: transparent !important;
}

.headlinesStyle:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

Ответы [ 3 ]

0 голосов
/ 06 июля 2018 

.headlinesStyle {
  position: relative;
  overflow: hidden;
  display: block;
  height: 18px;
text-overflow: ellipsis;
width: 15%;
white-space: nowrap;
color: #333 !important;
}

.headlinesStyle::selection {
  color: transparent !important;
}

.headlinesStyle:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

.headlinesStyle {
  position: relative;
  overflow: hidden;
  display: block;
  width: 20%;
  height: 18px;
  white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.headlinesStyle::selection {
  color: transparent !important;
}

.headlinesStyle:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>
0 голосов
/ 06 июля 2018

Вы можете достичь этого, используя white-space и text-overflow, например: 

.dots {
    max-width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    color: black; //if you want to color the dots
}


<table>
  <tr>
    <td>short text</td>
    <td class="dots"><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXTTEXTTEXTTEXTTEXTTEXT </a></td>
    <td>short</td>
  </tr>
</table>

Вот рабочий jsfiddle: http://jsfiddle.net/o24b6w0u/2/

0 голосов
/ 06 июля 2018

Пожалуйста, добавьте следующие стили в ваш код .. 

a {
  text-overflow: ellipsis;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
<table>
  <tr>
    <td>short text</td>
    <td><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span>
    </td>
    <td>short</td>
  </tr>
</table>

Кроме того, если у вас есть промежуток для достижения эллипса, он вам не нужен. Простое применение стилей непосредственно к тегу привязки

...