✍ 📁 🙈 🙉 🙊

CSS word-wrap

<h3>CSS overflow 控制捲軸</h3>

<pre>
捲軸控制在網頁設計上算是滿常碰到的問題，尤其當 div 排版法漸成為主流時， 
善用 ccs overflow 就能有效的的掌握各種捲軸效果。

overflow:       控制當內容超過顯示區域時捲軸的顯示，
overflow-x:     x捲軸的顯示。
overflow-y:     y捲軸的顯示。

捲軸顯示有四種狀態 ﹕
visible(預設):內容完全顯示不嵌入顯示區域。
auto:內容嵌入顯示區域，並視情況顯示水平與垂直捲軸。
scroll:內容嵌入顯示區域，水平捲軸會出現但視情況顯示可捲動或不可捲動。
hidden:內容嵌入顯示區域，捲軸不會出現。</pre>

<table border="1" style="width:100%">
<tbody><tr><td style="width:50%">
<div id="overflow" >
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IpFKbErhPeVG1R6S23rHkucs4A5KK_oq_uAcCSAT0_LF-o1r-HcfCOU7uqruFbQ5VsnnIXshygbOJCu1vDcptJIc8vVUtxacrb6hIThyphenhypheng5pdUo6cluBfAcZmsL7iIrmjSxv89KtB2aFH/s300/inCollage_20191124_173415963_mh1574588854008.jpg"  />
</div>
</td><td>
<div id="DDf">
<select onchange="Change(this.value)">
   <option value="visible" >overflow:visible</option>
   <option value="hidden"  >overflow:hidden</option>
   <option value="auto" >overflow:auto </option>
   <option value="scroll" >overflow:scroll</option>
   <option value="overflow-x:hidden" >overflow-x:hidden</option>
   <option value="overflow-y:hidden" >overflow-y:hidden</option>
</select>

<pre>
<<c>style>
#outerDiv{ overflow :<span id="span1">visible</span>
           overflowx:<span id="span2">visible</span>  
           overflowy:<span id="span3">visible</span> }

<<c>/style>
</pre>
</div>
</td></tr></tbody></table>

if(x == "overflow-y:hidden"){ overflow.style.overflow='scroll' ;
                              overflow.style.overflowY='hidden' ; }

span1.innerHTML = overflow.style.overflow;
span2.innerHTML = overflow.style.overflowX;
span3.innerHTML = overflow.style.overflowY;

}

</script>

#overflow{ height:200px;width:200px;
           padding:5px;
           border: 3px solid black;
           overflow:visible }

//#DDf{position: fixed;
//top:10px ; left:350px}

input  {cursor:pointer;}

pre { font-size: 18px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<h3>CSS 文字換行技巧<br>word-break、word-wrap</h3>

<br><br>
<label class="container">
  <input type="radio" name="S1" checked onchange="change(1)">
          word-break: normal</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(2)" >
          word-break: break-all</label>
<br>

<label class="container">
  <input type="radio" name="S1" onchange="change(3)" >
          word-break: keep-all</label>
<br>
<label class="container">
  <input type="radio" name="S1" onchange="change(4)" >
          word-wrap: normal</label>
<br> 
<label class="container">
  <input type="radio" name="S1" onchange="change(5)" >
          word-wrap: break-word</label>

<div id="DPP" class="narrow">
<br>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
<br><br>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
<br><br>
𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃</div>

if(x==1){ DPP.className="A1" }
if(x==2){ DPP.className="A2" }
if(x==3){ DPP.className="A3" }
if(x==4){ DPP.className="A4" }
if(x==5){ DPP.className="A5" }

}

</script>

.container{font-size: 20px;}

#DPP {
  padding: 10px;
  border: 1px solid;
  width: 400px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px; }

.A1{word-break: normal;}

.A2{word-break: break-all;}

.A3{word-break: keep-all;}

.A4{word-wrap: normal;}

.A5{word-wrap: break-word;}

</style>

Edit

#word-break #word-wrap #word-break: normal #word-break: break-all #word-break: keep-all #word-wrap: normal #word-wrap: break-word #CSS 文字換行技巧 #CSS overflow #CSS 控制捲軸 #CSS overflow #CSS overflow-x #CSS overflow-y #CSS overflow :visible

JSON format

<pre>
以 JavaScript 物件表示一筆資料
        var obj = [ {"AA":"11", "BB":"22", "CCC":"33" },
                    {"BB":"1", "CC":"2" }];</pre>
<table border="1"width="100%" >
<tr><td>
1</td><td>
var obj </td><td>得出二個物件 <c id="D1"></c> 
</td></tr><tr><td>
2</td><td>
JSON.stringify(obj)</td><td> 得出字串化 
   <c id="D2"></c>
</td></tr><tr><td>

3</td><td>
obj.length </td><td>得出長度 <c id="D3"></c>
</td></tr><tr><td>

4</td><td>
Object.keys(obj).length </td><td>得出長度 <c id="D4"></c>
</td></tr><tr><td>

5</td><td> 
Object.keys(obj[0]).length </td><td>得出長度 <c id="D5"></c>
</td></tr><tr><td>

6</td><td> 
Object.keys(obj[1]).length </td><td>得出長度 <c id="D6"></c>
</td></tr><tr><td>

7</td><td> 
JSON.stringify(obj[0]) </td><td>得出 <c id="D7"></c>
</td></tr><tr><td>

8</td><td> 
JSON.stringify(obj[1]) </td><td>得出 <c id="D8"></c>
</td></tr><tr><td>

9</td><td> 
obj[0].AA </td><td>得出 <c id="D9"></c>
</td></tr><tr><td>

10</td><td>
obj[0].BB </td><td>得出 <c id="D10"></c>
</td></tr><tr><td>

11</td><td>
obj[1].BB </td><td>得出 <c id="D11"></c>

</td></tr></table>

D1.innerHTML= obj ;
D2.innerHTML= JSON.stringify(obj) ;
D3.innerHTML= obj.length ;
D4.innerHTML= Object.keys(obj).length ; 
D5.innerHTML= Object.keys(obj[0]).length ;
D6.innerHTML= Object.keys(obj[1]).length ;
D7.innerHTML= JSON.stringify(obj[0]) ;  
D8.innerHTML= JSON.stringify(obj[1]) ;  
D9.innerHTML= obj[0].AA ;  
D10.innerHTML= obj[0].BB ;  
D11.innerHTML= obj[1].BB ;

</script>

Edit

HTML Table

<table>標簽定義 HTML 表格。

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>

<table rules="rows" style="width:95%" >
<caption><<c>table rules="rows" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="cols" style="width:95%" >
<caption><<c>table rules="cols" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td></tr><tr><td>

<table rules="all" style="width:95%" >
<caption><<c>table rules="all" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="none" style="width:95%" >
<caption><<c>table rules="none" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</rd></tr></tbody></table>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS word-wrap

JSON format

HTML Table

<table>標簽定義 HTML 表格。

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

CSS word-wrap

JSON format

HTML Table

<table>標簽定義 HTML 表格。

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單