Вопросы Теги

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

Ниже приведен подход, использующий NumPy's linear indexing , который работает для кортежей любых длин, предназначенных для генерации многомерных массивов - 

# Convert list of indices to a 2D array version
idx = np.array(lst)

# Decide on the shape of output array based on the extents, then initialize
shp = idx.max(0)+1
out = np.zeros(shp,dtype=bool)

# Using np.put insert 1s in out at places specified by linear indices version
np.put(out,np.ravel_multi_index(idx.T,shp),1)

Вход для образца, выход - 

In [54]: lst
Out[54]: [(0, 1, 3), (0, 2, 2), (1, 0, 0), (1, 3, 1), (2, 1, 3)]

In [55]: out
Out[55]: 
array([[[False, False, False, False],
        [False, False, False,  True],
        [False, False,  True, False],
        [False, False, False, False]],

       [[ True, False, False, False],
        [False, False, False, False],
        [False, False, False, False],
        [False,  True, False, False]],

       [[False, False, False, False],
        [False, False, False,  True],
        [False, False, False, False],
        [False, False, False, False]]], dtype=bool)

7
задан Ijas Ameenudeen 18 January 2019 в 11:06
поделиться

5 ответов

Вот, другой берет его, и Вы не должны жить без замещающего знака!

<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]

В предложении Кодера Питания я пересмотрел это немного. Существует действительно только два изменения, добавление doctype (см. примечания ниже), и добавление display: inline-block атрибут на .qrytxt DIV. Вот то, на что это похоже теперь...

<!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

  • A 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-связывающий правило, ellipsis-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>
7
ответ дан 6 December 2019 в 11:54
поделиться

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

document.getElementByID("qrytxt").offsetWidth;

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

4
ответ дан 6 December 2019 в 11:54
поделиться

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>
2
ответ дан 6 December 2019 в 11:54
поделиться

@Robert

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

это - симпатичный hacky, который я знаю, но эй стоящий права попытки?

отредактируйте Другую идею: определите позицию отделения, содержащего замещающие знаки с JavaScript и если это не продвинуто полностью правильное, скройте его?

2
ответ дан 6 December 2019 в 11:54
поделиться

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

2
ответ дан 6 December 2019 в 11:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: