Эллипсис переполнения текста не отображается с помощью специального шрифта

В настоящее время я пытаюсь создать текстовое поле со скрытым переполняющим текстом. Он отлично работает, но для некоторой части. Я использую

text-overflow: ellipsis;

Это должно помещать три точки ("...") в место, где мой текст отключен, но он не помещает три точки, вместо этого он помещает символ, который выглядит как три точки (называемый "многоточие" ).

Шрифт, который я сейчас использую, не имеет этого символа, поэтому он показывает какой-то другой случайный символ вместо трех точек.

Есть ли у кого-нибудь простой способ обхода (без javascript, пожалуйста, только CSS), сохраняя мой шрифт для текста?

Ответ 1

Чтобы полностью имитировать функциональность text-overflow: ellipsis без использования JavaScript, но при этом поддерживая полную поддержку браузера (text-overflow: "..." работает только в Firefox 9 во время этого сообщения и полностью недоступен в любом другом браузере) чрезвычайно сложно ( если не невозможно).

Единственное решение, о котором я могу думать без каких-либо "хаков", - это отредактировать ваш файл шрифта, создав символ Юникода для символа ... с многоточием. У меня нет опыта в этой области, но здесь есть ссылка, которая кажется довольно хорошей: http://sourceforge.net/projects/ttfedit/

Вот код HTML, который у меня есть:

<div id="wrapoff">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula, augue id pretium euismod, nisi dolor sodales orci, non porttitor ligula velit ac lorem.
</div>

И некоторые CSS:

#wrapoff {
  width: 200px;
  border: 2px solid blue;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
#wrapoff:after {
  content: "...";
  position: absolute;
  right: 0;
  top: 0;
  background-color: white;
  padding: 0 5px;
}

Это добавляет псевдоэлемент поверх div #wrapoff в верхнем правом углу, позволяя содержимому работать как text-overflow: ellipsis. Недостатком этого является то, что "эллипсис" всегда показывает, независимо от того, действительно ли контент распространяется и переполняется. Это не может быть исправлено, поскольку нет способа использовать CSS для определения того, переполняется ли текст с страницы.

Здесь JSFiddle:

http://jsfiddle.net/ysoxyuje/

Граница должна показать вам размер самого элемента.

Ответ 2

http://jsfiddle.net/cbppL/707/

HTML

<header>
<h1>Long text is so long oh my is long indeed</h1>
</header>

CSS

header {
border:1px solid red;
width:150px;
position:relative;
}

h1 {
   overflow:hidden;
    white-space:nowrap;
   /* -ms-text-overflow:ellipsis; */
    /* text-overflow:ellipsis; */
    width:150px;
    height:1.2em;
}
header:after{
    content:"...";
    position:absolute;
    top:0;
    right:0;
    background:#fff;
}
h1:hover {
    overflow:visible;
}

Не очень хорошее решение. Это будет зависеть от того, какой у вас фона. Надежда помогает!

Ответ 3

Вместо "эллипсиса" вы можете указать свой собственный набор символов для обозначения переполнения текста.

Если ваш пользовательский шрифт имеет определенный период, вы должны просто использовать три периода:

text-overflow: '...';

Здесь JSFiddle в действии: http://jsfiddle.net/x5e6yv21/

Ответ 4

Вам необходимо использовать следующее:

white-space: nowrap;
text-overflow: ellipsis;

Ответ 5

Из того, что я понимаю, вы проблема в том, что в используемом шрифте вам не хватает символа эллипсиса.

Чтобы быстро исправить это, вы можете выбрать эту последнюю букву с помощью селектора псевдоэлементов ::last-letter и изменить свойство font-family на другой шрифт, который поддерживает многоточие _

Ответ 6

Итак, я знаю, что это не идеально, но это обход. Спецификация CSS3 говорит о том, что эллипсис должен взять свой стиль из контейнера, в котором они находятся. Это работает правильно во всех браузерах, кроме IE8/9, который берет его с многоцветным стилем из первой буквы контейнера. Обходной подход, который я предлагаю, заключается в том, чтобы обернуть текст внутри ваших "переполненных" элементов встроенным элементом, предоставить внешнему контейнеру шрифт, в котором указан символ с <многоточий > , и предоставить встроенный элемент внутри пользовательского шрифт. Это будет выглядеть примерно так: http://jsfiddle.net/u9dudost/2/

Если вам нужно добавить поддержку IE8/9, добавьте следующее:

div {
    white-space: nowrap;
}

div::before {
    font-family: 'Helvetica', sans-serif; /* Your custom font here. */
    content: ''; /* IE9 fix */
}

Ответ 7

Убедитесь, что у вас

white-space: nowrap;
overflow: hidden;

с помощью

text-overflow: ellipsis;