আমি ভাবছি উদাহরণস্বরূপ কোনও ডিভের মধ্যে লাইন গণনা করার কোনও উপায় আছে কিনা। বলুন আমাদের মত একটি ডিভ আছে:
<div id="content">hello how are you?</div>অনেকগুলি বিষয়ের উপর নির্ভর করে ডিভের একটি, বা দুটি, এমনকি চারটি লাইন পাঠ্য থাকতে পারে। স্ক্রিপ্টটি জানার কোনও উপায় আছে কি?
অন্য কথায়, স্বয়ংক্রিয় বিরতিগুলি কি ডম-এ আদৌ উপস্থাপন করা হয়?
উত্তর:
ডিভের আকারটি যদি সামগ্রীতে নির্ভর করে (যা আমি আপনার বিবরণ থেকে কেস হিসাবে ধরে নিয়েছি) তবে আপনি ডিভের উচ্চতাটি ব্যবহার করে এটি ব্যবহার করতে পারেন:
var divHeight = document.getElementById('content').offsetHeight;এবং ফন্ট লাইন উচ্চতার দ্বারা ভাগ করুন:
document.getElementById('content').style.lineHeight;বা রেখার উচ্চতাটি যদি এটি সুস্পষ্টভাবে সেট না করা থাকে:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");আপনার প্যাডিং এবং আন্ত-লাইন স্পেসিং অ্যাকাউন্টে নেওয়া দরকার।
সম্পাদনা
সম্পূর্ণ স্ব-অন্তর্ভুক্ত পরীক্ষা, স্পষ্টভাবে লাইন-উচ্চতা নির্ধারণ:
function countLines() {
var el = document.getElementById('content');
var divHeight = el.offsetHeight
var lineHeight = parseInt(el.style.lineHeight);
var lines = divHeight / lineHeight;
alert("Lines: " + lines);
}<body onload="countLines();">
<div id="content" style="width: 80px; line-height: 20px">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>
</body>line-height(এটি স্পষ্টভাবে সেট করা হয়নি) ব্যবহার করা হবেwindow.getComputedStyle(element, null).getPropertyValue('line-height')
একটি সমাধান হ'ল স্ক্রিপ্ট ব্যবহার করে স্প্যান ট্যাগের প্রতিটি শব্দ বন্ধ করে দেওয়া। তারপরে যদি প্রদত্ত স্প্যান ট্যাগের ওয়াই ডাইমেনশনটি এটি তাত্ক্ষণিক পূর্বসূরীর চেয়ে কম হয় তবে একটি লাইন বিরতি ঘটেছে।
GetClientRects () ফাংশনটি পরীক্ষা করে দেখুন যা কোনও উপাদানের রেখার সংখ্যা গণনা করতে ব্যবহার করা যেতে পারে। এটি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ এখানে।
var message_lines = $("#message_container")[0].getClientRects();এটি একটি জাভাস্ক্রিপ্ট DOM অবজেক্ট প্রদান করে। এটি করার মাধ্যমে লাইনের পরিমাণ জানা যাবে:
var amount_of_lines = message_lines.length;এটি প্রতিটি লাইনের উচ্চতা এবং আরও অনেক কিছু ফিরিয়ে দিতে পারে। এটি আপনার স্ক্রিপ্টে যুক্ত করে এটি করতে পারে এমন সামগ্রীর পুরো অ্যারেটি দেখুন, তারপরে আপনার কনসোল লগটিতে সন্ধান করুন।
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");যদিও কয়েকটি বিষয় লক্ষণীয় তা হ'ল এটি কেবলমাত্র যদি উপাদানটি অন্তর্ভুক্ত উপাদানটি ইনলাইন থাকে তবে তা কাজ করে তবে আপনি প্রস্থটি নিয়ন্ত্রণ করতে ব্লক উপাদান সহ অন্তর্নির্মিত ইনলাইন উপাদানটিকে ঘিরে রাখতে পারেন:
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>যদিও আমি স্টাইলের মতো হার্ড কোডিংয়ের প্রস্তাব দিই না। এটি কেবল উদাহরণস্বরূপ।
আমি এখানে এবং অন্যান্য প্রশ্নের উত্তর নিয়ে সন্তুষ্ট ছিলাম না। সর্বাধিক রেট করা উত্তর গ্রহণ করে না paddingবা borderবিবেচনায় নেয় না এবং তাই স্পষ্টতই উপেক্ষা করেbox-sizing । আমার উত্তরটি এখানে এবং অন্যান্য থ্রেডগুলিতে এমন একটি কৌশল মিশ্রিত করে যা আমার সন্তুষ্টি নিয়ে কাজ করে।
এটি নিখুঁত নয়: যখন কোনও সংখ্যাসূচক মান line-height(যেমন normalবা inherit) এর জন্য পুনরুদ্ধার করতে সক্ষম হয় না তখন এটি কেবল font-sizeদ্বারা গুণিত ব্যবহার করে1.2 । এই ক্ষেত্রে পিক্সেলের মান সনাক্ত করার জন্য সম্ভবত অন্য কেউ নির্ভরযোগ্য উপায়ের পরামর্শ দিতে পারেন।
তা ছাড়া, আমি এটি ফেলেছি বেশিরভাগ শৈলী এবং কেস সঠিকভাবে পরিচালনা করতে সক্ষম হয়েছি।
চারপাশে খেলতে এবং পরীক্ষার জন্য jsFizz । নীচে ইনলাইন।
function countLines(target) {
var style = window.getComputedStyle(target, null);
var height = parseInt(style.getPropertyValue("height"));
var font_size = parseInt(style.getPropertyValue("font-size"));
var line_height = parseInt(style.getPropertyValue("line-height"));
var box_sizing = style.getPropertyValue("box-sizing");
if(isNaN(line_height)) line_height = font_size * 1.2;
if(box_sizing=='border-box')
{
var padding_top = parseInt(style.getPropertyValue("padding-top"));
var padding_bottom = parseInt(style.getPropertyValue("padding-bottom"));
var border_top = parseInt(style.getPropertyValue("border-top-width"));
var border_bottom = parseInt(style.getPropertyValue("border-bottom-width"));
height = height - padding_top - padding_bottom - border_top - border_bottom
}
var lines = Math.ceil(height / line_height);
alert("Lines: " + lines);
return lines;
}
countLines(document.getElementById("foo"));div
{
padding:100px 0 10% 0;
background: pink;
box-sizing: border-box;
border:30px solid red;
}<div id="foo">
x<br>
x<br>
x<br>
x<br>
</div>ধারক বস্তুর ক্লোন করুন এবং 2 টি অক্ষর লিখুন এবং উচ্চতা গণনা করুন। এটি সমস্ত শৈলীর প্রয়োগ, রেখার উচ্চতা ইত্যাদির সাথে প্রকৃত উচ্চতাটি ফেরত দেয় Now জ্যাকুরিতে, উচ্চতাটি প্যাডিং, মার্জিন এবং সীমানা ছাড়িয়ে যায়, প্রতিটি লাইনের আসল উচ্চতা গণনা করে দুর্দান্ত:
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() / size;আপনি যদি প্রতিটি বর্ণের আলাদা উচ্চতা সহ একটি বিরল ফন্ট ব্যবহার করেন তবে এটি কার্যকর হয় না। তবে সমস্ত স্বাভাবিক ফন্টের সাথে কাজ করে যেমন আড়িয়াল, মনো, কমিকস, ভার্দানা ইত্যাদি আপনার ফন্টের সাহায্যে পরীক্ষা করুন।
উদাহরণ:
<div id="content" style="width: 100px">hello how are you? hello how are you? hello how are you?</div>
<script type="text/javascript">
$(document).ready(function(){
calculate = function(obj){
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
return obj.height() / size;
}
n = calculate($('#content'));
alert(n + ' lines');
});
</script>ফলাফল: 6 Lines
স্ট্যান্ডার্ডের বাইরে বিরল ফাংশন ছাড়াই সমস্ত ব্রাউজারে কাজ করে।
চেক করুন: https://jsfiddle.net/gzceamtr/
clone→ cloneNode, hide→ style.visibility = "hidden", html('a<br>b')→ textContent='a\r\nb', appendTo('body')→ document.documentElement.appendChild, height()→getBoundingClientRect().height
যারা jQuery ব্যবহার করেন তাদের জন্য http://jsfiddle.net/EppA2/3/
function getRows(selector) {
var height = $(selector).height();
var line_height = $(selector).css('line-height');
line_height = parseFloat(line_height)
var rows = height / line_height;
return Math.round(rows);
}$(selector).css('line-height');, আপনি সেই ফাংশনটির বাইরে একটি নম্বর পাবেন না।
আমি নিশ্চিত যে এটি এখন অসম্ভব। যদিও এটি ছিল।
আই 7 এর getClientRects এর বাস্তবায়ন আমি যা করতে চাই ঠিক তাই করেছিল। এই পৃষ্ঠাটি আইইউতে খুলুন , এটিকে উইন্ডো প্রস্থের পরিবর্তিত করে রিফ্রেশ করার চেষ্টা করুন এবং দেখুন যে কীভাবে প্রথম উপাদানটিতে রেখার সংখ্যা পরিবর্তন হয়। এই পৃষ্ঠাটি থেকে জাভাস্ক্রিপ্টের মূল লাইনগুলি এখানে:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));দুর্ভাগ্যক্রমে আমার জন্য, ফায়ারফক্স সর্বদা উপাদান হিসাবে একটি ক্লায়েন্ট আয়তক্ষেত্র প্রদান করে, এবং IE8 এখন একই করে। (মার্টিন হেনেনের পৃষ্ঠাটি আজ কাজ করে কারণ আইই আই আই কমপ্যাট ভিউতে রেন্ডার করে; বিভিন্ন মোডের সাথে খেলতে আইই 8-তে এফ 12 টিপুন))
এটা দুঃখের. দেখে মনে হচ্ছে আবার ফায়ারফক্সের আক্ষরিক কিন্তু মূল্যহীন প্রয়োগটি মাইক্রোসফ্টের দরকারী হিসাবে জিতেছে। বা আমি কী এমন পরিস্থিতি মিস করছি যেখানে নতুন getClientRects কোনও বিকাশকারীকে সহায়তা করতে পারে?
উপর থেকে গাইপ্যাডকের উত্তরের ভিত্তিতে, এটি আমার পক্ষে কাজ করে বলে মনে হচ্ছে
function getLinesCount(element) {
var prevLH = element.style.lineHeight;
var factor = 1000;
element.style.lineHeight = factor + 'px';
var height = element.getBoundingClientRect().height;
element.style.lineHeight = prevLH;
return Math.floor(height / factor);
}এখানে কৌশলটি হ'ল লাইন-উচ্চতা এতটাই বাড়ানো যে এটি কোনও ব্রাউজার / ওএসের পার্থক্যকে যেভাবে তারা ফন্টগুলি সরবরাহ করে তা "গ্রাস" করবে here
এটি বিভিন্ন স্টাইলিং এবং বিভিন্ন ফন্টের আকার / পরিবারগুলির সাথে কেবল এটিই বিবেচনা করে না (যেহেতু আমার ক্ষেত্রে এটি গুরুত্ব দেয় না), প্যাডিং - যা সহজেই সমাধানে যুক্ত হতে পারে।
না, নির্ভরযোগ্যভাবে নয়। কেবলমাত্র অনেকগুলি অজানা ভেরিয়েবল রয়েছে
তালিকাটি এগিয়ে যায়। কোনও দিন আমি আশা করি জাভাস্ক্রিপ্টের মাধ্যমে এটি নির্ভরযোগ্যভাবে সম্পাদন করার মতো একটি পদ্ধতি থাকবে তবে সেই দিনটি না আসা পর্যন্ত আপনার ভাগ্য নেই।
আমি এই জাতীয় উত্তরগুলি ঘৃণা করি এবং আমি আশা করি যে কেউ আমাকে ভুল প্রমাণ করতে পারে।
আপনি দৈর্ঘ্য বিভক্ত করতে সক্ষম হওয়া উচিত ('\ n') দৈর্ঘ্য এবং লাইন বিরতি পেতে।
আপডেট: এটি এফএফ / ক্রোমে কাজ করে তবে আইই নয়।
<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = $("div").text().split('\n');
for (var i = 0; i < arr.length; i++)
$("div").after(i + '=' + arr[i] + '<br/>');
});
</script>
</head>
<body>
<div>One
Two
Three</div>
</body>
</html>getClientRectsমত ক্লায়েন্ট rects আসতে এই এবং আপনি লাইন পেতে চান, মত ফাংশন ফলো ব্যবহার এই
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}আমি যখন এইচটিএমএল সম্পাদকটি বিকাশ করি তখন আমি লাইন নম্বর গণনা করার একটি উপায় খুঁজে পেয়েছি। প্রাথমিক পদ্ধতিটি হ'ল:
আইইতে আপনি getBoundingClientRects কল করতে পারেন, এটি প্রতিটি লাইনকে একটি আয়তক্ষেত্র হিসাবে ফিরিয়ে দেয়
ওয়েবকিট বা নতুন স্ট্যান্ডার্ড এইচটিএমএল ইঞ্জিনে, এটি প্রতিটি উপাদান বা নোডের ক্লায়েন্ট আয়তক্ষেত্রগুলি দেয় আয়তক্ষেত্রের শীর্ষটি এর চেয়ে ছোট এবং এর থেকে নীচে বৃহত্তর রয়েছে, অবস্থাটি সত্য)
সুতরাং পরীক্ষার ফলাফলটি দেখুন:
সবুজ আয়তক্ষেত্রটি প্রতিটি সারির বৃহত্তম আয়তক্ষেত্র হয়
লাল আয়তক্ষেত্রটি নির্বাচনের সীমানা
নীল আয়তক্ষেত্রটি প্রসারিত হওয়ার পরে শুরু থেকে নির্বাচনের সীমানা, আমরা দেখতে পাই এটি লাল আয়তক্ষেত্রের চেয়ে বড় হতে পারে, তাই প্রতিটি আয়তক্ষেত্রের নীচে এটি অবশ্যই লাল আয়তক্ষেত্রের নীচের চেয়ে ছোট হতে হবে তা সীমাবদ্ধ করতে আমাদের পরীক্ষা করতে হবে।
var lineCount = "?";
var rects;
if (window.getSelection) {
//Get all client rectangles from body start to selection, count those rectangles that has the max bottom and min top
var bounding = {};
var range = window.getSelection().getRangeAt(0);//As this is the demo code, I dont check the range count
bounding = range.getBoundingClientRect();//!!!GET BOUNDING BEFORE SET START!!!
//Get bounding and fix it , when the cursor is in the last character of lineCount, it may expand to the next lineCount.
var boundingTop = bounding.top;
var boundingBottom = bounding.bottom;
var node = range.startContainer;
if (node.nodeType !== 1) {
node = node.parentNode;
}
var style = window.getComputedStyle(node);
var lineHeight = parseInt(style.lineHeight);
if (!isNaN(lineHeight)) {
boundingBottom = boundingTop + lineHeight;
}
else {
var fontSize = parseInt(style.fontSize);
if (!isNaN(fontSize)) {
boundingBottom = boundingTop + fontSize;
}
}
range = range.cloneRange();
//Now we have enougn datas to compare
range.setStart(body, 0);
rects = range.getClientRects();
lineCount = 0;
var flags = {};//Mark a flags to avoid of check some repeat lines again
for (var i = 0; i < rects.length; i++) {
var rect = rects[i];
if (rect.width === 0 && rect.height === 0) {//Ignore zero rectangles
continue;
}
if (rect.bottom > boundingBottom) {//Check if current rectangle out of the real bounding of selection
break;
}
var top = rect.top;
var bottom = rect.bottom;
if (flags[top]) {
continue;
}
flags[top] = 1;
//Check if there is no rectangle contains this rectangle in vertical direction.
var succ = true;
for (var j = 0; j < rects.length; j++) {
var rect2 = rects[j];
if (j !== i && rect2.top < top && rect2.bottom > bottom) {
succ = false;
break;
}
}
//If succ, add lineCount 1
if (succ) {
lineCount++;
}
}
}
else if (editor.document.selection) {//IN IE8 getClientRects returns each single lineCount as a rectangle
var range = body.createTextRange();
range.setEndPoint("EndToEnd", range);
rects = range.getClientRects();
lineCount = rects.length;
}
//Now we get lineCount hereএই সমাধান চেষ্টা করুন:
function calculateLineCount(element) {
var lineHeightBefore = element.css("line-height"),
boxSizing = element.css("box-sizing"),
height,
lineCount;
// Force the line height to a known value
element.css("line-height", "1px");
// Take a snapshot of the height
height = parseFloat(element.css("height"));
// Reset the line height
element.css("line-height", lineHeightBefore);
if (boxSizing == "border-box") {
// With "border-box", padding cuts into the content, so we have to subtract
// it out
var paddingTop = parseFloat(element.css("padding-top")),
paddingBottom = parseFloat(element.css("padding-bottom"));
height -= (paddingTop + paddingBottom);
}
// The height is the line count
lineCount = height;
return lineCount;
}আপনি এখানে এটি কর্মে দেখতে পাবেন: https://jsfiddle.net/u0r6avnt/
পৃষ্ঠার প্যানেলগুলিকে পুনরায় আকার দেওয়ার চেষ্টা করুন (পৃষ্ঠার ডান দিকটি প্রশস্ত বা সংক্ষিপ্ত করতে) এবং তারপরে এটি আবার চালনা করুন এটি নিশ্চিত করতে পারে যে সেখানে কতগুলি লাইন রয়েছে reli
এই সমস্যাটি দেখতে যতটা শক্ত তার চেয়ে বেশি, তবে বেশিরভাগ অসুবিধা দুটি উত্স থেকে আসে:
ব্রাউজারগুলিতে সরাসরি জাভাস্ক্রিপ্ট থেকে কোয়েরিতে পাঠ্য রেন্ডারিং খুব নিম্ন-স্তরের। এমনকি সিএসএস :: প্রথম লাইন সিউডো-নির্বাচক বেশ অন্যান্য নির্বাচকরা মত আচরণ না (আপনি এটা বিপরীতমুখী, উদাহরণস্বরূপ, সব থেকে styling প্রয়োগ করতে না পারেন, না কিন্তু প্রথম লাইন)।
আপনি কীভাবে লাইনের সংখ্যা গণনা করেন তাতে প্রসঙ্গটি একটি বড় ভূমিকা পালন করে। উদাহরণস্বরূপ, যদি লাইন-উচ্চতাটি স্পষ্টভাবে লক্ষ্য উপাদানটির শ্রেণিবিন্যাসে সেট না করা থাকে তবে আপনি একটি লাইনের উচ্চতা হিসাবে "স্বাভাবিক" ফিরে পেতে পারেন। এছাড়াও, উপাদানটি সম্ভবত ব্যবহার করছে box-sizing: border-boxএবং তাই প্যাডিংয়ের সাপেক্ষে subject
আমার দৃষ্টিভঙ্গিটি সরাসরি লাইন-উচ্চতা নিয়ন্ত্রণ করে এবং বক্স আকারের পদ্ধতিতে ফ্যাক্টরিংয়ের মাধ্যমে # 2 হ্রাস করে, যা আরও নিরঙ্কুশ ফলাফলের দিকে নিয়ে যায়।
কিছু ক্ষেত্রে, অযৌক্তিক পাঠ্যে একাধিক সারিতে বিস্তৃত লিঙ্কের মতো, আপনি যখন এটি ব্যবহার করেন সারি সংখ্যা এবং প্রতিটি লাইনের প্রতিটি সমন্বয় পেতে পারেন:
var rectCollection = object.getClientRects();https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
এটি কাজ করে কারণ প্রতিটি লাইন এত সামান্য পৃথক হবে। যতক্ষণ না তারা রেন্ডারার দ্বারা পৃথক "আয়তক্ষেত্র" হিসাবে টানা হয়।
@BoyBrunius 2010 এর পরামর্শ অনুসরণ করে আমি এটিকে jQuery দিয়ে তৈরি করেছি। সন্দেহ নেই এটির উন্নতি হতে পারে তবে এটি কিছুকে সাহায্য করতে পারে।
$(document).ready(function() {
alert("Number of lines: " + getTextLinesNum($("#textbox")));
});
function getTextLinesNum($element) {
var originalHtml = $element.html();
var words = originalHtml.split(" ");
var linePositions = [];
// Wrap words in spans
for (var i in words) {
words[i] = "<span>" + words[i] + "</span>";
}
// Temporarily replace element content with spans. Layout should be identical.
$element.html(words.join(" "));
// Iterate through words and collect positions of text lines
$element.children("span").each(function () {
var lp = $(this).position().top;
if (linePositions.indexOf(lp) == -1) linePositions.push(lp);
});
// Revert to original html content
$element.html(originalHtml);
// Return number of text lines
return linePositions.length;
}#textbox {
width: 200px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="textbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
<br>sed diam nonummy</div>আপনি উপাদান উচ্চতা এবং উপাদান উচ্চতা সঙ্গে তুলনা করতে পারেন line-height: 0
function lineCount(elm) {
const style = elm.getAttribute('style')
elm.style.marginTop = 0
elm.style.marginBottom = 0
elm.style.paddingTop = 0
elm.style.paddingBottom = 0
const heightAllLine = elm.offsetHeight
elm.style.lineHeight = 0
const height1line = elm.offsetHeight
const lineCount = Math.round(heightAllLine / height1line)
elm.setAttribute('style', style)
if (isNaN(lineCount)) return 0
return lineCount
}