HTML段落與折行

TML可以將文檔分割為若干段落

段落通過<p>標簽定義，注意不要忘記結束標簽

THML折行

可以使用如下例子測試

HTML輸出-使用提醒

對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。

家在用canvas繪制文本時，經常會碰到怎么解決文本折行的問題。今天，老K為大家分享一種實現方法。

實現的基本思路:

先將輸入的每個字拆分成單個元素，再將這些元素插入到一個隱藏的元素中，該元素寬度和目標canvas的寬度相等，接下來只需要遍歷插入容器中的子元素，然后根據子元素相對插入容器的相對距離繪制文字到canvas里。

<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>canvas-text-wrap</title>
 <style type="text/css">
 * {
 margin: 0
 }
 #main {
 width: 400px;
 margin: 20px auto 0;
 }
 #canvas, #editableWarp, #editable, #hideText {
 width: 400px;
 height: 125px;
 padding: 0;
 border: 0;
 background: #333;
 color: #FFF;
 font-size: 14px;
 font-family: 'sans-serif';
 position: relative;
 z-index: 1
 }
 #hideText {
 z-index: 0;
 position: absolute;
 　word-break: break-word;
 word-wrap: break-word;
 }
 p {
 line-height: 32px;
 }
</style>
 </head>
 <body>
 <div id="main">
 <p>
 輸入：
 </p>
 <div id="editableWarp">
 <div id="hideText"></div>
 <textarea id="editable" placeholder="請輸入文字..."></textarea>
 </div>
 <p>
 canvas輸出：
 </p>
 </div>
 <script type="text/javascript">
 function addEvent(obj,type,handle){//封裝綁定事件方法
 try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
 obj.addEventListener(type,handle,false);
 }catch(e){
 try{ // IE8.0及其以下版本
 obj.attachEvent('on' + type,handle);
 }catch(e){ // 早期瀏覽器
 obj['on' + type]=handle;
 }
 }
 };
 function getStyle(node, styleType){//獲取標簽樣式方法
 return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//瀏覽器中有node.currentStyle方法就用，沒有就用另一個
 };

 var $editable=document.getElementById('editable'),
 $hideText=document.getElementById('hideText'),
 $main=document.getElementById('main'),
 editable_pos=$editable.getBoundingClientRect();
 function initCanvasDom(){//創建canvas標簽
 var $canvas=document.createElement('canvas');
 $canvas.innerHTML='您的瀏覽器不支持canvas'; 
 $canvas.width='400';
 $canvas.height='125';
 $canvas.id='canvas';
 $main.appendChild($canvas);
 return $canvas;
 }
 var $canvas=initCanvasDom();
 var ctx=$canvas.getContext('2d');
 addEvent($editable,'blur',function(){//綁定方法
 var txt=$editable.value,
 html=converText(txt);
 $hideText.innerHTML='';
 $hideText.innerHTML=html;
 drawText();
 });
 function converText(txt) {
 var html=txt.replace(/(\S)/ig, '<span>$1</span>');
 html=html.replace(/\n|\r/ig,'<br>');
 html=html.replace(/\s/ig,' ');
 return html;
 }
 function drawText() {
 $main.removeChild($canvas);//刪除舊的canvas標簽
 $canvas=initCanvasDom();//創建新的canvas標簽
 ctx=$canvas.getContext('2d');
 var canvas_width=getStyle($canvas,'width'),
 canvas_height=getStyle($canvas,'height');
 ctx.clearRect(0,0,canvas_width,canvas_height);
 var fontSize=getStyle($hideText,'fontSize');
 ctx.font=fontSize + ' sans-serif';
 ctx.textAlign='center';
 ctx.textBaseline='top';
 ctx.fillStyle='#FFFFFF';
 var text_span_list=$hideText.getElementsByTagName('span'),
 i=0,text_span_list_length=text_span_list.length,pos=null, tex='',item_left=0,item_top=0;
 for(;i<text_span_list_length;i++){
 pos=text_span_list[i].getBoundingClientRect();
 txt=text_span_list[i].innerHTML;
 item_left=parseInt(pos.left-editable_pos.left);
 item_top=parseInt(pos.top-editable_pos.top);
 ctx.fillText(txt,item_left,item_top);
 }
 }
</script>
 </body>
</html>

這樣基本實現了這個功能。大家可以參考一下代碼，自己親自試一下。為了實現canvas里的文字時時更新，需要動態創建canvas標簽，并且每次執行drawText方法時要刪掉上一次創建的canvas標簽，重新創建一個新的。

本文為原創內容，若轉載請注明出處，轉發感激不盡。

TML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。

實例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML基礎教程：元素屬性標題段落

HTML 段落

HTML 段落是通過 <p> 標簽進行定義的。

實例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 鏈接

HTML 鏈接是通過 <a> 標簽進行定義的。

實例

<a >This is a link</a>

注釋：在 href 屬性中指定鏈接的地址。

HTML 圖像

HTML 圖像是通過 <img> 標簽進行定義的。

實例

<img src="aaaa.jpg" width="104" height="142" />

<p> 元素：

<p>This is my first paragraph.</p>

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素擁有一個開始標簽 <p>，以及一個結束標簽 </p>。

元素內容是：This is my first paragraph。

<body> 元素：

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標簽 <body>，以及一個結束標簽 </body>。

元素內容是另一個 HTML 元素（p 元素）。

<html> 元素：

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

<html> 元素定義了整個 HTML 文檔。

這個元素擁有一個開始標簽 <html>，以及一個結束標簽 </html>。

元素內容是另一個 HTML 元素（body 元素）。

HTML 水平線

<hr /> 標簽在 HTML 頁面中創建水平線。

hr 元素可用于分隔內容。

實例

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

提示：使用水平線 (<hr> 標簽) 來分隔文章中的小節是一個辦法（但并不是唯一的辦法）。HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

注釋是這樣寫的：

實例

<!-- This is a comment -->

注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。

提示：合理地使用注釋可以對未來的代碼編輯工作產生幫助。HTML 折行

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：

在線咨詢

上一篇：HTML5程序員需要學習的技能總結
下一篇：Excel表格一鍵轉成多個Word文件，可插圖片，比

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商