나는이 문제를 몇 번 겪었습니다. 문자열에있는 문자를 특정 숫자로 제한하는 데 문제가 없습니다. 그러나 일부 문자는 다른 문자보다 길기 때문에 다른 문자로 래핑하거나 내 DIV 요소를 더 넓게 만들고 다른 웹 사이트와 일정하게 만듭니다. 예컨대문자를 특정 너비로 제한
:
Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe
문자의 수와 반대로 실제 문자열의 너비를 기반으로하는 문자열의 크기를 일정하게 유지하는 방법이 있습니까? 누군가는 이것에 대한 해결책을 강구해야만했다.
답변 해 주셔서 감사합니다. 거기에 고정 너비 글꼴이 있다고 생각했습니다. 불행히도 나의 고객은 그들을 좋아하지 않습니다. 나는 GD Lib이나 자바 스크립트 솔루션을 탐험해야 할 것이다. – mmundiff
사용중인 특정 글꼴의 "font-widths"를 기준으로 문자를 제한하기 위해 PHP에 알고리즘을 작성하지 않고 고정 폭 글꼴을 사용할 수 있습니다.
또는 자바 스크립트 솔루션을 사용하여 너비를 테스트 할 수도 있지만 머리 꼭대기가 어떻게 떨어져 있는지 확신 할 수 없습니다.
당신은 아마) (GD와 imagefontwidth 함께 플레이해야 할 것 : http://ar2.php.net/manual/es/function.imagefontwidth.php
GD의 글꼴 렌더링 메커니즘을 기반으로 문자열의 길이를 알려주고 최종 사용자의 브라우저에서 실제 길이와 일치하지 않을 수도 있음을 유의하십시오. 너비를 근사하는 좋은 방법이지만 정확한 결과를 제공하지는 않습니다 (정확한 결과는 자바 스크립트에서만 얻을 수 있습니다 - 자바 스크립트는 최종 사용자의 브라우저에서 실행되기 때문에 완벽한 정보가 있습니다). –
당신과 동의하십시오, @ 벤 리, 대략적인 방법입니다. 질문의 범위를 유지하려고 노력하십시오. JavaScript를 사용하면 주어진 DIV의 CSS 스타일과 함께 수학을 수행해야한다고 생각합니다. 생각할 필요가 있지만 아마 가능할 것입니다. –
JS 해킹이 필요없고 PHP가 필요하지 않습니다! JS와 CSS를 결합하고 솔루션을 살펴보고 문제를 발견 할 수 있는지 알려주세요. – acm
이 이것은 PHP에서 수행 할 수 없습니다 - 당신이 할 수있는 최선은 대략이다. 브라우저가 다르면 운영 체제가 다르므로 같은 글꼴에 대해 글꼴 너비가 다르게 적용됩니다. 따라서 브라우저 및 OS에 글꼴의 글꼴 글꼴 폭 배열을 수동으로 저장하더라도 다른 글꼴 글꼴과 일치하지 않을 수 있습니다.
강제로 인쇄하는 것보다 너비가 다른 글꼴 가능성을 고려하여 디자인을 수행하는 것이 좋습니다.
말하자면, 이것은 약간의 해킹이 있지만 자바 스크립트에서 완벽하게 (근사치없이) 수행 될 수 있습니다. 가능한 방법은 여러 가지가 있지만 다음과 같습니다. 찾고자하는 너비의 div에 전체 문자열을 렌더링 한 다음 div의 높이를 측정합니다. 한 줄보다 더 큰 경우 가능하면 마지막 단어를 점진적으로 제거하는 루프를 시작하십시오. div의 높이가 한 줄로 유지 될 때까지 계속하십시오.
서식을 지정할 때 CSS를 사용하여 모두 균일 한 너비를 가지므로 오른쪽에 울퉁불퉁 한 가장자리가 없습니다. 다음과 같은 것 :
p { text-align: justify; }
이 CSS + JS 솔루션에 재미있는 일이있었습니다. 그것은 집중적으로 테스트되지 않았습니다 (파이어 폭스 + 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>
당신은 고정 폭 글꼴을 사용할 수 있습니다 http://en.wikipedia.org/wiki/Monospaced_font – acm
당신을했다가 내 js + CSS 솔루션을 참조하십시오? – acm
@andre matos 나는 지금 그것을보고있다.도움을 주셔서 감사합니다 – mmundiff