Как я могу обрезать текст и добавить многоточие, если оно длиннее, чем нужно?

Question

Я ищу хороший способ добавить многоточие, "...", когда мне нужно изящно отобразить строку, которая слишком велика и не помещается в нужное место.

То, что я сейчас делаю, - это поиск максимальной длины символов, которая поместится в пространстве, затем обрежьте строку до этой длины и добавьте «...». Все это на стороне сервера.

В псевдокоде должно выглядеть так:

// I define this MAXCHARS var value by hunch
String outputString = MyLengthyString.SubString(0, MAXCHARS)
outputString.concatenate("...")
view.aLabelInThePage = outputString

Проблема в том, что когда я не использую шрифты фиксированной длины, он может отображаться не так, как я хочу (занимая все пространство).

Есть ли способ получить желаемые результаты только с помощью JavaScript и CSS? Если нет, то есть ли лучший способ, чем мой?

Answer 1

Вы можете использовать CSS3 text-overflow свойство со значением ellipsis. Это свойство было введено в IE6 и позже принято другими основными браузерами, а Firefox 7 был самым последним, добавившим поддержку для него:

#mySpan {
  /* IE 6+, Opera 11+, Chrome 1+, Safari 1.3+, Firefox 7+ */
  text-overflow: ellipsis;

  /* IE 8    */ -ms-text-overflow: ellipsis;
  /* Opera 9 */ -o-text-overflow: ellipsis;
}

Firefox 9 будет первым браузером, который реализует синтаксис с двумя значениями для этого свойства, позволяя левой и правой сторонам текста иметь значение, хотя этот синтаксис в настоящее время помечен как * подверженный риску рабочий проект спецификации .

<Ч />

На этой странице есть решение не-JS для более старых версий Firefox, но оно не идеально и имеет несколько ограничений.

Answer 2

Вы можете использовать text-overflow: ellipsis;, но это не поддерживается Firefox.

Answer 3

Будет ли работать команда jquery width вместе со вторым тегом span, который просто показывает "..."?

if ($("#mySpan").width() > 400) {
     $("mySpan").width(400);
     $("mySpanEllipsis").show();
} 
else {
     $("mySpanEllipsis").hide();
}

И ваш HTML выглядит как

<span id="mySpan"></span><span id="mySpanEllipsis">...</span>

Notпроверено, так что используйте на свой страх и риск :-).