Ограничение символов определенной шириной - PullRequest
Новая
       3

Ограничение символов определенной шириной

0 голосов
/ 23 ноября 2010

Я сталкивался с этой проблемой несколько раз.У меня нет проблем с ограничением символов в строке до определенного числа.Однако некоторые символы длиннее других, поэтому он переносится на другую строку или делает мой элемент DIV шире и неравномерным с остальной частью моего веб-сайта.

Например: 

Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe

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

Есть ли способ получить одинаковый размер для строки, основанной наширина фактической строки в отличие от количества символов?Кто-то должен был придумать решение этой проблемы, не так ли?

Ответы [ 6 ]

3 голосов
/ 23 ноября 2010
  • Первое (очевидное) решение: переключиться на шрифт фиксированной ширины, такой как Courier, Lucida Console, Consolas и т. Д.
  • Второе решение: использовать библиотеку GD для записывает строки в графический объект и измеряет этот объект.
2 голосов
/ 23 ноября 2010

Возможно, вам придется поиграть с GD и imagefontwidth (): http://ar2.php.net/manual/es/function.imagefontwidth.php

1 голос
/ 23 ноября 2010

Это не может быть сделано в PHP - лучшее, что вы можете сделать, это приблизительное.Различные браузеры и разные операционные системы отображают ширину шрифта для одного и того же шрифта по-разному.Поэтому, даже если вы вручную сохранили массив ширины шрифта символа для шрифта в своем браузере и ОС, он может не совпадать с другими.

Обычно лучше работать над дизайном с возможностью использования шрифтов различной ширинычем пытаться заставить его.

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

1 голос
/ 23 ноября 2010

Без написания алгоритма в PHP для ограничения символов на основе "font-widths" для конкретного используемого шрифта вы можете использовать моноширинный шрифт.

В качестве альтернативы, я уверен, что решение JavaScript можетбыть написано также, чтобы проверить ширину, но я не уверен, как с макушки головы.

0 голосов
/ 23 ноября 2010

Работал над решением CSS + JS.Он не был интенсивно протестирован (Firefox + IE7 / 8), но должен работать нормально ... 

<script type="text/javascript" src="jquery.js"></script>
<style>
    .monospaced, .not-monospaced{
        font: normal normal 16px/16px Verdana; /* not monospaced font */
        clear: both;
    }
    .monospaced span{
        float: left;
        display: block;
        width: 16px;
        text-align: center;
    }
</style>
<script>
    $(document).ready(function(){
        $('.monospaced').each(function(){
            var monospace = $(this).html(); // .trim() does not work at IE http://api.jquery.com/jQuery.trim/ (view comments)
            monospace.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
            mono = monospace.split('');

            for(i = 0; i < mono.length; i++){
                if(mono[i] == ' ')
                    mono[i] = '&nbsp;';

                mono[i] = '<span>'+mono[i]+'</span>';
            }

            $(this).html(mono.join(''));
        });
    });
</script>
</head>
<body>
    <div class="not-monospaced">
        This is supposed to be monospaced...
    </div>
    <div class="not-monospaced">
        mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
    </div>

    <div class="monospaced">
        This is supposed to be monospaced...
    </div>
    <div class="monospaced">
        mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
    </div>
</body>
0 голосов
/ 23 ноября 2010

Используйте CSS для форматирования, чтобы все они имели одинаковую ширину - с неровными краями с правой стороны.Как то так: 

p { text-align: justify; }
...