✍ 📁 🙈 🙉 🙊 : 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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

CSS word-wrap

沒有留言:

張貼留言

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單