मैं HTML तत्व के पाठ में "नई लाइनों" की स्थिति कैसे निर्धारित कर सकता हूं?

Question

एक एचआईवी तत्व जैसे एचटीवी तत्व के अंदर लंबा टेक्स्ट जोड़ना, तत्व उस पाठ को लपेटता है। वास्तव में, वास्तव में इस प्रश्न पाठ की तरह। मैं इस तरह के एक HTML तत्व से पाठ कैसे ले सकता हूं और यह निर्धारित कर सकता हूं कि यह कहां टूटता है? यानी जहां एक नई लाइन डाली जाती है।

उदाहरण के लिए, इस बॉक्स में, "... इस तरह" के बाद एक नई रेखा है, एक "... जहां यह" और दो के बाद "... डाला गया है।"

Answer 1

तो, समस्या वास्तव में है कैसे एचटीएमएल 5 कैनवास में शब्द-रैपिंग करना है:

यह कुछ मानक HTML तत्व है जो पाठ पकड़ परिवर्तित करने के लिए सभी है और/या एचटीएमएल 5 कैनवास में एक फोटो। और दुर्भाग्यवश, '.fillText()' विधि के लिए पाठ के टुकड़े को तोड़ने के लिए पर्याप्त स्मार्ट नहीं है, इसलिए मुझे प्रत्येक पंक्ति का "मैन्युअल रूप से" पता लगाने की आवश्यकता है।

आप क्या कर सकते हैं measureText बाद में एक शब्द जोड़ना। पहले शब्द को मापें, और यदि यह आपके कंटेनर की चौड़ाई (ctx2d.measureText(words).width <= containerWidth) पर फिट बैठता है, तो आप एक और शब्द जोड़ सकते हैं और फिर माप सकते हैं। जब तक शब्दों की स्ट्रिंग फिट नहीं होती है। यदि ऐसा नहीं होता है - तो आपको अगली पंक्ति पर fillText करना होगा।

मैन्युअल डाला पंक्ति विराम का सवाल है, वे विशेष रूप से या तो textareas में \n या \r पात्रों द्वारा या HTML तत्व, <br \> तरह से HTML में प्रतिनिधित्व कर रहे हैं,। इस प्रकार, पाठ को मापने से पहले आप अनुच्छेदों द्वारा इसे विभाजित करना चाहते हैं।

textareas में:

var paragraphs = textarea.value.split('\n'); 

गैर प्रपत्र तत्वों में:

var paragraphs = []; 

// getting all <p> and elements in a typical HTML element 
// as well as individual text nodes (they are just DOM-nodes), 
// separated by <br /> elements 
var innerNodes = nonFormElement.childNodes; 

for (var i = 0, len = innerNodes.length; i += 1) { 
    // if a sub-element has some text in it, 
    // add the text to our list 
    var content = innerNodes[i].textContent; 
    if (content) { 
     paragraphs.push(content); 
    } 
} 

Answer 2

मुझे यकीन नहीं है कि आप क्या हासिल करने की कोशिश कर रहे हैं। लेकिन यहां एक साधारण चाल है जिसका उपयोग आप एकल शब्दों की स्थिति की पहचान के लिए कर सकते हैं। देखें इस fiddle

---

var $text = $('#text'), 
    breaks = [], 
    top; 

// wrap words (\w+) and punctuation (\S+) [well, non-word and non-space] 
// in <spans> we can easily identify 
$text.html($text.text().replace(/(\w+|\S+)/g, '<span>$1</span>')); 

$text.children().each(function() { 
    var $this = $(this), 
     _top = $this.position().top; 

    if (top === undefined) { 
     top = _top; 
    } else if (top < _top) { 
     top = _top; 
     // moved a row down 
     breaks.push($this.prev()); 
     $this.prev().css('color', 'red'); 
    } 
}); 


console.log(breaks);