Определение ширины напечатанной строки с помощью веб-приложения

https://stackoverflow.com/questions/33893

09-06-2019
|

Вопрос

В моем веб-приложении (PHP) есть часть сайта, на которой хранится история недавних поисков.Самые последние запросы отображаются в боковом окне.Если текст запроса слишком длинный, я обрезаю его и показываю многоточие.Например:«Мой очень длинный вопрос…»

В настоящее время я усекаю после определенного количества символов.Поскольку шрифт не является монотипным, запрос всех I является более узким, чем запрос всех W.Я бы хотел, чтобы все они были примерно одинаковой ширины до эллипсов.Есть ли способ получить приблизительную ширину результирующей строки, чтобы эллипсы для любой заданной строки с самого начала находились примерно в одинаковом количестве пикселей?Есть ли у CSS способ?Есть ли PHP?Будет ли это лучше обработано JavaScript?

Решение

Вот еще один взгляд на это, и вам не придется жить без многоточия!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Short text. Fail!
    </div>
</body>

</html>

Здесь есть один недостаток: если текст достаточно короткий, чтобы его можно было отобразить полностью, эллипсы все равно будут отображаться.

[РЕДАКТИРОВАТЬ:26.06.2009]

По предложению Power-Coder я немного переработал это.На самом деле изменений всего два: добавление doctype (см. примечания ниже) и добавление display: inline-block атрибут на .qrytxt ДИВ.Вот как это выглядит сейчас...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

Примечания:

Просматривается в IE 8.0, Opera 9, FF 3.
А doctype требуется IE для получения display: inline-block работать правильно.
Если .qrytxt Переполнение DIV происходит при длинном слове, между многоточием и последним видимым словом будет большой пробел.Вы можете убедиться в этом, просмотрев пример и изменяя ширину браузера небольшими шагами.(вероятно, это существовало и в исходном примере, просто я тогда этого не заметил)

Итак, снова несовершенное решение, использующее только CSS.Javascript, возможно, единственное, что может обеспечить идеальный эффект.

[РЕДАКТИРОВАТЬ:27.06.2009]

Вот еще одна альтернатива, которая использует расширения для браузера.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
        div.sidebox 
        {
            width: 26%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -ms-text-overflow:ellipsis;
            -moz-binding:url(ellipsis-xbl.xml#ellipsis);
            white-space:nowrap;
        }
    </style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Short text. FTW
        </div>
    </div>
</body>
</html>

Обратите внимание, что для того, чтобы приведенный выше пример работал, вы должны создать XML-файл, на который ссылается правило привязки -moz: многоточие-xbl.xml.Он должен содержать следующий XML:

<?xml version="1.0" encoding="UTF-8"?>
  <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
      <content>
        <xul:window>
          <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
        </xul:window>
      </content>
    </binding>
  </bindings>

Другие советы

Вы также можете довольно легко использовать немного JavaScript:

document.getElementByID("qrytxt").offsetWidth;

даст вам ширину элемента в пикселях и даже работает в IE6. Если вы добавляете диапазон, содержащий эллипсы, в конец каждого запроса, можно использовать простой логический тест в JavaScript с небольшим количеством манипуляций с CSS, чтобы скрыть / показать их по мере необходимости.

Есть ли у CSS способ?

Нет

Есть ли PHP?

Нет

Для этого вам нужно будет получить метрики шрифта для каждого символа и применить их ко всем буквам в строке.Хотя вы могли бы сделать это, используя библиотеку рисования/рендеринга, такую как ImageMagick на сервере, на самом деле это не сработает, поскольку разные браузеры в разных ОС по-разному отображают шрифты.

Даже если бы это сработало, вы бы не захотели этого делать, потому что рендеринг занял бы вечность.Ваш сервер сможет отправлять 1 страницу в секунду (если это так) вместо нескольких тысяч.

Если вы можете жить без завершающего ..., то вы можете прекрасно его подделать, используя div теги и css overflow: hidden, так:

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

PHP следует полностью исключить из-за того факта, что хотя есть функция, предназначенная для измерения шрифтов, http://www.php.net/imageftbbox , у PHP нет возможности узнать, есть ли у посетителя настройка минимального размера шрифта, превышающая ожидаемый размер шрифта.

@Роберт

что, если вы поместите эллипсы в элемент div с низким z-index чтобы, когда он перемещается влево (для более коротких строк), они закрывались фоновым изображением или чем-то еще?

Я знаю, это довольно хакерски, но стоит попробовать, верно?

редактировать Еще одна идея:определить положение элемента div, содержащего эллипсы, с помощью javascript, и, если он не нажат до конца, скрыть его?

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow