Знание ширины текстовой строки в HTML для переноса слов и других приложений - PullRequest
Новая
       13

Знание ширины текстовой строки в HTML для переноса слов и других приложений

5 голосов
/ 01 августа 2009

Знаете ли вы хороший кросс-браузерный способ узнать, насколько широкой будет текстовая строка, чтобы вы могли разбить ее точно так, чтобы она соответствовала фиксированной ширине?

Предположим, вы хотите разбить длинный текст, например, чтобы он не переполнял контейнер фиксированной ширины, но вы хотите, чтобы строка разбивалась как можно ближе к границе, поэтому угадывание места для вставки & shy; s не является чистым решение.

Я хочу исследовать, я думаю, что это можно сделать с помощью невидимого элемента div, затем распечатать строку внутри него и проверить ширину элемента div или что-то в этом роде с помощью Javascript.

Кто-нибудь делал что-то подобное?

* (основное внимание уделяется не переносу слов, это просто приложение, которое мне приходит в голову сейчас, но я хочу знать ширину текста)

1 Ответ

2 голосов
/ 02 августа 2009

Вот полный подход "Хит Робинсон" (этот справочник путешествует хорошо?). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript">
        function txtContent_onchange()
        {
            var span = document.getElementById("spanMeasure")
            span.innerHTML = "";
            span.appendChild(document.createTextNode(this.value));
            document.getElementById("txtWidth").value = span.scrollWidth;

        }
    </script>
    <style type="text/css">
        #spanMeasure 
        {
            position:absolute;
            top:0px;
            left:0px;
            visibility:hidden;
            width:10px;
            white-space:nowrap;
            overflow:hidden
        }
    </style>
</head>
<body>

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br />
    <input id="txtWidth" />
    <span id="spanMeasure"><span>

</body>
</html>

Критическим моментом здесь является конфигурация элемента span. Этот элемент не повлияет на внешний вид страницы. Его свойство scrollWidth возвращает длину содержащегося в нем текста. Конечно, вам нужно установить любые атрибуты стиля шрифта, чтобы получить разумное значение.

В соответствии с quirksmode сайт Opera может быть немного ненадежным с таким подходом, но я подозреваю, что он ближе всего подходит к полностью кросс-браузерному решению.

...