텍스트 너비 계산
저는 jQuery를 사용하여 텍스트 폭을 계산하려고 합니다.무슨 일인지는 모르겠지만, 제가 분명히 뭔가 잘못하고 있어요.
코드는 다음과 같습니다.
var c = $('.calltoaction');
var cTxt = c.text();
var cWidth = cTxt.outerWidth();
c.css('width' , cWidth);
이것이 저에게 더 효과적이었습니다.
$.fn.textWidth = function(){
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
여기 다른 기능보다 더 좋은 기능이 게시되어 있습니다.
- 더 짧습니다
- 그것은 an을 통과할 때 작동합니다.
<input>,<span>또는"string". - 기존 DOM 요소를 재사용하기 때문에 자주 사용하는 경우 더 빠릅니다.
데모: http://jsfiddle.net/philfreo/MqM76/
// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$.fn.textWidth = function(){
var self = $(this),
children = self.children(),
calculator = $('<span style="display: inline-block;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
기본적으로 룬의 것보다 개선되었지만, 그것은 사용되지 않습니다..html
그textWidth으로 변에제를며수기능는용하되를 합니다.string인수가 선행 및 후행 공백을 설명하지 않기 때문입니다(이들 공백은 더미 컨테이너에서 렌더링되지 않음). 마크업 문자열 HTML 마크업)이 <br>안 출력이 안 나와요. 한 공간의 길이를 반환합니다.
은 이은오그문다니입제들의 일 뿐입니다.textWidth 를받이는함을 string, 왜하면냐 DOM 요지면주, 고리그어가 ..html()요소에 대해 호출되면 이러한 사용 사례에 대해 이 문제를 해결할 필요가 없습니다.
그러나 예를 들어, 텍스트 너비를 동적으로 수정하기 위해 텍스트 너비를 계산하는 경우input유형의 사용 을 "" " " " " " " " " " " " " " "로 대체하는 것이 . 문자열을 html로 인코딩합니다.
Philfreo의 솔루션을 사용했기 때문에 이 문제를 해결하는 버전이 있습니다(추가 사항에 대한 설명 포함).
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
var htmlText = text || this.val() || this.text();
htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
htmlText = htmlText.replace(/\s/g, " "); //replace trailing and leading spaces
$.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
jQuery의 너비 함수는 일치하지 않는 상자 모델로 인해 텍스트 너비를 결정하려고 할 때 약간 의심스러울 수 있습니다.확실한 방법은 요소 내부에 div를 주입하여 실제 텍스트 너비를 결정하는 것입니다.
$.fn.textWidth = function(){
var sensor = $('<div />').css({margin: 0, padding: 0});
$(this).append(sensor);
var width = sensor.width();
sensor.remove();
return width;
};
이 미니 플러그인을 사용하려면 다음과 같이 하십시오.
$('.calltoaction').textWidth();
이 솔루션은 잘 작동하며 크기 조정 전에 오리진 글꼴을 상속합니다.
$.fn.textWidth = function(text){
var org = $(this)
var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>');
if (!text) {
html.css("font-family", org.css("font-family"));
html.css("font-size", org.css("font-size"));
}
$('body').append(html);
var width = html.width();
html.remove();
return width;
}
룬의 것도 브레인의 것도 텍스트를 담고 있는 요소가 고정된 너비를 가질 경우를 대비해 저를 위해 작동하지 않았습니다.저는 오카메라와 비슷한 것을 했습니다.선택기를 적게 사용합니다.
상대적으로 안 될font-size과 같이 코드가 삽입됩니다.htmlCalc에의 요소.body따라서 부모 관계에 대한 정보를 잃게 됩니다.
$.fn.textWidth = function() {
var htmlCalc = $('<span>' + this.html() + '</span>');
htmlCalc.css('font-size', this.css('font-size'))
.hide()
.prependTo('body');
var width = htmlCalc.width();
htmlCalc.remove();
return width;
};
선택 상자의 텍스트를 사용하여 이 작업을 수행하려는 경우 또는 두 텍스트가 작동하지 않는 경우 대신 다음 작업을 수행하십시오.
$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
또는
function textWidth(text){
var calc = '<span style="display:none">' + text + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
당신이 먼저 텍스트를 잡고 싶다면,
cTxt에서 메서드를 호출하는 것은 jQuery 개체가 아닌 단순 문자열입니다. cTxt는 실제로 포함된 텍스트입니다.
.children()이 h1 또는 p와 같은 텍스트 요소를 참조하는 경우 빈 집합을 반환하므로 니코의 경우 약간 변경됩니다.따라서 jQuery 개체에 메서드를 만들 때는 대신 .contents()를 사용하고 $(이) 대신 이를 사용합니다.
$.fn.textWidth = function(){
var contents = this.contents(),
wrapper = '<span style="display: inline-block;" />',
width = '';
contents.wrapAll(wrapper);
width = contents.parent().width(); // parent is now the wrapper
contents.unwrap();
return width;
};
이틀 동안 유령을 쫓아다니면서, 왜 텍스트의 너비가 틀리는지 알아내려고 노력한 결과, 나는 텍스트 문자열의 공백 때문에 너비 계산이 중단된다는 것을 깨달았습니다.
그래서, 다른 팁은 빈 공간이 문제를 일으키는지 확인하는 것입니다. 사용하세요.
공간을 확보하고 해결책을 찾을 수 있는지 확인합니다.
사람들이 제안한 다른 기능들도 잘 작동하지만, 그것은 문제를 일으키는 하얀 공간이었습니다.
지정된 요소 내에서 텍스트 노드와 요소가 혼합된 너비를 결정하려면 모든 내용을 wrapInner()로 래핑하고 너비를 계산한 다음 내용의 래핑을 해제해야 합니다.
*참고: 기본적으로 제공되지 않으므로 unwrapInner() 함수를 추가하려면 jQuery를 확장해야 합니다.
$.fn.extend({
unwrapInner: function(selector) {
return this.each(function() {
var t = this,
c = $(t).children(selector);
if (c.length === 1) {
c.contents().appendTo(t);
c.remove();
}
});
},
textWidth: function() {
var self = $(this);
$(this).wrapInner('<span id="text-width-calc"></span>');
var width = $(this).find('#text-width-calc').width();
$(this).unwrapInner();
return width;
}
});
@philfreo의 답변에 대한 확장:
확인할 수 있는 기능을 추가했습니다.text-transform와 같은 text-transform: uppercase보통 텍스트를 더 넓게 만드는 경향이 있습니다.
$.fn.textWidth = function (text, font, transform) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text())
.css('font', font || this.css('font'))
.css('text-transform', transform || this.css('text-transform'));
return $.fn.textWidth.fakeEl.width();
};
var calc = '<span style="display:none; margin:0 0 0 -999px">' + $('.move').text() + '</span>';
getColumnWidth()를 호출하여 텍스트의 내용을 가져옵니다.이것은 완벽하게 잘 작동합니다.
someFile.css
.columnClass {
font-family: Verdana;
font-size: 11px;
font-weight: normal;
}
function getColumnWidth(columnClass,text) {
tempSpan = $('<span id="tempColumnWidth" class="'+columnClass+'" style="display:none">' + text + '</span>')
.appendTo($('body'));
columnWidth = tempSpan.width();
tempSpan.remove();
return columnWidth;
}
참고:- 인라인 .css를 사용하려면 글꼴 세부 정보를 스타일로만 전달합니다.
니코의 코드를 내 필요에 맞게 수정했습니다.
$.fn.textWidth = function(){
var self = $(this),
children = self.contents(),
calculator = $('<span style="white-space:nowrap;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
.contents()를 사용하고 있는데 .children()이 필요한 텍스트 노드를 반환하지 않습니다.또한 반환된 너비가 뷰포트 너비의 영향을 받아 래핑이 발생하여 화이트스페이스:nowrap을 사용하여 뷰포트 너비에 관계없이 정확한 너비를 얻습니다.
$.fn.textWidth = function(){
var w = $('body').append($('<span stlye="display:none;" id="textWidth"/>')).find('#textWidth').html($(this).html()[0]).width();
$('#textWidth').remove();
console.log(w);
return w;
};
거의 한 대의 정기선첫 번째 캐릭터를 사용할 수 있습니다.
100% 작동하도록 나열된 솔루션을 얻을 수 없었기 때문에 @chmurson(@Okamera를 기반으로 함)과 @philfreo의 아이디어를 바탕으로 이 하이브리드를 고안했습니다.
(function ($)
{
var calc;
$.fn.textWidth = function ()
{
// Only create the dummy element once
calc = calc || $('<span>').css('font', this.css('font')).css({'font-size': this.css('font-size'), display: 'none', 'white-space': 'nowrap' }).appendTo('body');
var width = calc.html(this.html()).width();
// Empty out the content until next time - not needed, but cleaner
calc.empty();
return width;
};
})(jQuery);
주의:
this개체이므로 jQuery 개체가 .$(this)많은 예들이 가지고 있는.- 더미 요소를 본체에 한 번만 추가하고 재사용합니다.
- 또한 다음을 지정해야 합니다.
white-space: nowrap다른 페이지 스타일에 기반한 줄 바꿈이 아니라 단일 줄 바꿈으로 측정됩니다. - 다음을 사용하여 이 작업을 수행할 수 없습니다.
font혼자서 그리고 명시적으로 복사해야 했습니다.font-size뿐만 아니라.이유는 아직 확실하지 않습니다(아직 조사 중입니다). - 입력 필드를 그런 식으로 지원하지 않습니다.
@philfreo한다.
텍스트뿐만 아니라 HTML 너비도 추가로 측정해야 하는 경우가 있습니다.저는 @philfreo 답변을 받아 더 유연하고 유용하게 만들었습니다.
function htmlDimensions(html, font) {
if (!htmlDimensions.dummyEl) {
htmlDimensions.dummyEl = $('<div>').hide().appendTo(document.body);
}
htmlDimensions.dummyEl.html(html).css('font', font);
return {
height: htmlDimensions.dummyEl.height(),
width: htmlDimensions.dummyEl.width()
};
}
텍스트 너비는 부모에 따라 다를 수 있습니다. 예를 들어 h1 태그에 텍스트를 추가하면 div 또는 레이블보다 넓기 때문에 제 솔루션은 다음과 같습니다.
<h1 id="header1">
</h1>
alert(calcTextWidth("bir iki", $("#header1")));
function calcTextWidth(text, parentElem){
var Elem = $("<label></label>").css("display", "none").text(text);
parentElem.append(Elem);
var width = Elem.width();
Elem.remove();
return width;
}
저는 @rune-kaagard와 같은 많은 양의 텍스트에 대한 솔루션에 어려움을 겪었습니다.발견한 것은 다음과 같습니다.
$.fn.textWidth = function() {
var width = 0;
var calc = '<span style="display: block; width: 100%; overflow-y: scroll; white-space: nowrap;" class="textwidth"><span>' + $(this).html() + '</span></span>';
$('body').append(calc);
var last = $('body').find('span.textwidth:last');
if (last) {
var lastcontent = last.find('span');
width = lastcontent.width();
last.remove();
}
return width;
};필드가 고정 너비 입력 또는 내용 편집 가능한 디브인 경우 수평 스크롤 너비를 스크롤 너비로 가져올 수 있습니다.
$("input").on("input", function() {
var width = el[0].scrollWidth;
console.log(width);
});
언급URL : https://stackoverflow.com/questions/1582534/calculating-text-width
'source' 카테고리의 다른 글
| 핀을 터치하지 않고 MKnotationView의 콜아웃 뷰를 트리거하는 방법은 무엇입니까? (0) | 2023.08.24 |
|---|---|
| 쿼리를 콘솔 대신 추적 또는 디버그로 출력하도록 Fluent NHibernate를 구성하는 방법은 무엇입니까? (0) | 2023.08.24 |
| Fancybox가 jQuery v1.9.0에서 작동하지 않음 [f.browser가 정의되지 않음/'msie' 속성을 읽을 수 없음] (0) | 2023.08.24 |
| iTunes Connect에서 앱 삭제 (0) | 2023.08.24 |
| ASP 버튼 안에 있는 멋진 글꼴 (0) | 2023.08.24 |