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

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

Например:

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

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

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

источник

2010-11-23 mmundiff

вы могли бы использовать моноширинный шрифт: http://en.wikipedia.org/wiki/Monospaced_font – acm 2010-11-23 17:25:15

сделал вас см. мое решение js + css? – acm 2010-11-23 18:46:34

@andre matos Я сейчас смотрю на него.Спасибо за вашу помощь – mmundiff 2010-11-23 19:08:39

Первое (очевидно) решение: переход на фиксированной ширины шрифта, такого как Courier, Lucida Console, Consolas и т.д.
Второе решение: использовать GD library чтобы write strings to a graphic object и измерить этот объект.

источник

2010-11-23 17:31:50 JYelton

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

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

источник

2010-11-23 17:25:57 simshaun

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

источник

2010-11-23 17:30:27

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

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

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

источник

2010-11-23 17:30:56

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

p { text-align: justify; }

источник

2010-11-23 17:45:01 stillstanding

Было ли забавно работать над этим решением 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>

источник

2010-11-23 18:04:43 acm

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

ответ

Смежные вопросы