Я несколько раз сталкивался с этой проблемой. У меня нет проблем с ограничением символов в строке конкретным числом. Тем не менее, некоторые символы длиннее других, поэтому он переносится на другую строку или делает мой элемент DIV более широким и неравномерным с остальной частью моего веб-сайта.
Например:
Literacy - Is it the Sa Machu Picchu, Cuzco, Pe – это точно такое же количество символов (23), включая пробелы, но Machu Pichu длиннее с точки зрения фактической ширины на экране.
Есть ли способ иметь одинаковый размер для строки, основанной на ширине фактической строки, а не на количестве символов? Кто-то должен был решить это раньше?
Вам, вероятно, придется играть с GD и imagefontwidth (): http://ar2.php.net/manual/es/function.imagefontwidth.php
Не записывая алгоритм в PHP для ограничения символов на основе «font-widths» для конкретного шрифта, который вы используете, вы можете использовать моноширинный шрифт.
В качестве альтернативы, я уверен, что JavaScript-решение можно было бы также написать, чтобы проверить ширину, но я не уверен, как от верхней части головы.
Это не может быть сделано в PHP – лучшее, что вы можете сделать, является приблизительным. Различные браузеры и различные операционные системы отличаются шириной шрифта для одного и того же шрифта. Поэтому, даже если вы вручную сохранили массив ширины шрифта символов для шрифта в вашем браузере и os, он может не совпадать с другими.
Обычно лучше работать с дизайном вокруг возможности шрифтов различной ширины, чем пытаться заставить его.
При этом это может быть сделано отлично (без аппроксимации) в javascript, хотя и с небольшим количеством взлома. Существует несколько возможных методов, но вот один из них: Начните с рендеринга полной строки в div, который имеет ширину, которую вы ищете, затем измерьте высоту div. Если оно больше одной строки, возможно, запустите цикл, постепенно удаляя последнее слово. Продолжайте движение, пока высота div не будет для одной линии.
Используйте CSS для форматирования, чтобы все они имели равномерную ширину – без зубчатых краев с правой стороны. Что-то вроде этого:
p { text-align: justify; }
Если бы какое-то удовольствие работало над этим решением 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] = ' '; 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>