整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          CSS3怎么使文本不換行

          CSS3怎么使文本不換行

          使文本不換行,可以使用CSS的white-space屬性,并將其值設置為nowrap。這樣,文本將不會在單詞之間換行,而是會繼續(xù)在同一行上直到到達元素的邊界。

          white-space: nowrap;

          你可以將此屬性應用于需要保持文本在同一行的元素上,例如:

          <div style="white-space: nowrap;">
            這是一個不會換行的文本塊。
          </div>

          在這個例子中,div元素內(nèi)的文本將不會換行。

          端--輸入框換行,高度自適應

          最近項目遇到一個說小不小說大不大的問題,輸入框要自動換行,并且高度還得自適應,我試了幾種方式,

          1.input 輸入,input不能換行,上網(wǎng)查詢了說將css設為word-break: break-all; word-wrap:break-word;也是無效的。

          2.div 設置contenteditable="true"屬性,這種方法可以實現(xiàn)輸入內(nèi)容自動換行,并且自適應高度,但是項目需要光標從邊輸入,我試過text-align:right是無效的。所以這種方式也不行。

          3.textarea,文本輸入框,想想這個應該可以了吧,文本輸入框是可以內(nèi)容自動換行,可是高度怎么都是固定的啊。我還是沒解決。百度吧,終于找到解決辦法啦。

          最后遇到一個光標在placeholder提示文字上面,解決辦法:#textarea::-webkit-input-placeholder{ padding-right: 4px;}

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title></title>

          <style>

          #textarea {

          display: block;

          margin:0 auto;

          overflow: hidden;

          width: 550px;

          font-size: 14px;

          height: 18px;

          line-height: 24px;

          padding:2px;

          text-align: right;

          }

          textarea {

          outline: 0 none;

          border-color: rgba(82, 168, 236, 0.8);

          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

          }

          </style>

          </head>

          <body>

          <textarea id="textarea" placeholder="回復內(nèi)容"></textarea>

          <script>

          var autoTextarea=function (elem, extra, maxHeight) {

          extra=extra || 0;

          var isFirefox=!!document.getBoxObjectFor || 'mozInnerScreenX' in window,

          isOpera=!!window.opera && !!window.opera.toString().indexOf('Opera'),

          addEvent=function (type, callback) {

          elem.addEventListener ?

          elem.addEventListener(type, callback, false) :

          elem.attachEvent('on' + type, callback);

          },

          getStyle=elem.currentStyle ? function (name) {

          var val=elem.currentStyle[name];

          if (name==='height' && val.search(/px/i) !==1) {

          var rect=elem.getBoundingClientRect();

          return rect.bottom - rect.top -

          parseFloat(getStyle('paddingTop')) -

          parseFloat(getStyle('paddingBottom')) + 'px';

          };

          return val;

          } : function (name) {

          return getComputedStyle(elem, null)[name];

          },

          minHeight=parseFloat(getStyle('height'));

          elem.style.resize='none';

          var change=function () {

          var scrollTop, height,

          padding=0,

          style=elem.style;

          if (elem._length===elem.value.length) return;

          elem._length=elem.value.length;

          if (!isFirefox && !isOpera) {

          padding=parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

          };

          scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

          elem.style.height=minHeight + 'px';

          if (elem.scrollHeight > minHeight) {

          if (maxHeight && elem.scrollHeight > maxHeight) {

          height=maxHeight - padding;

          style.overflowY='auto';

          } else {

          height=elem.scrollHeight - padding;

          style.overflowY='hidden';

          };

          style.height=height + extra + 'px';

          scrollTop +=parseInt(style.height) - elem.currHeight;

          document.body.scrollTop=scrollTop;

          document.documentElement.scrollTop=scrollTop;

          elem.currHeight=parseInt(style.height);

          };

          };

          addEvent('propertychange', change);

          addEvent('input', change);

          addEvent('focus', change);

          change();

          };

          </script>

          <script>

          var text=document.getElementById("textarea");

          autoTextarea(text);// 調(diào)用

          </script>

          </body>

          </html>

          TML是一種用來描述網(wǎng)頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況,整理出平時常用的HTML標簽。

          HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客

          1、最基本的HTML結(jié)構(gòu)

          <!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->

          <!DOCTYPE html>

          <html>

          <!-- head標簽是所有頭部元素的容器。head標簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內(nèi)容不會顯示在瀏覽器的。 -->

          <head>

          <!-- 設置字符集,如果字符集不對,可能導致亂碼。一般建議utf-8國際編碼 -->

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />

          <!-- SEO相關標簽,title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->

          <title>網(wǎng)頁標題</title>

          <meta name="keywords" content="PHP程序員,技術(shù)博客,個人博客,雷雪松" />

          <meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個優(yōu)秀的個人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學習,PHP開發(fā)與編程,Web前端開發(fā),MySQL學習和教程,NoSQL數(shù)據(jù)庫教程以及個人的人生經(jīng)歷和觀點。" />

          <link rel="stylesheet" type="text/css" href="main.css" />

          <script type="text/javascript" src="main.js"></script>

          </head>

          <!-- 正文部分,所有在瀏覽器上可見的內(nèi)容必須寫在body標簽內(nèi)部 -->

          <body>

          </body>

          </html>

          2、最常用的HTML標簽

          a、布局標簽

          div標簽定義文檔中的分區(qū)或節(jié)(division/section),可以把文檔分割為獨立的、不同的部分,主要用于布局。

          aside標簽的內(nèi)容可用作文章的側(cè)欄,<span style="color: #ff0000;">html5新增標簽</span>。

          header標簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標簽</span>。

          section標簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標簽</span>。

          footer 標簽定義文檔或節(jié)的頁腳,通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等,<span style="color: #ff0000;">html5新增標簽</span>。

          article標簽規(guī)定文章獨立的其他內(nèi)容,比如:標題、內(nèi)容、評論,<span style="color: #ff0000;">html5新增標簽</span>。

          b、文本標簽

          h1-h6標簽可定義標題

          p標簽定義段落

          b/strong標簽加粗

          em標簽來表示強調(diào)的文本,斜體

          strong標簽表示重要文本

          u標簽下劃線

          s標簽刪除線

          br標簽表示回車換行

          hr標簽表示水平線

          span標簽被用來組合文檔中的行內(nèi)元素。

          blockquote標簽表示塊引用

          pre標簽可定義預格式化的文本,保持原有格式的一種標簽。

          sub標簽下標,

          sup>標簽上標

          &nbsp;表示一個空格

          &copy;表示版權(quán)符

          &lt;表示<

          &gt;表示>

          c、a標簽定義超鏈接,指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點,可以在當前頁面打開,新開窗口。

          <a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>

          d、多媒體標簽

          img標簽主要在網(wǎng)頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設置,否則圖像會變形。

          <img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />

          audio標簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>

          video標簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

          e、序列化標簽

          ul和li無序列表標簽

          <ul>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ul>

          ol和li有序列表標簽,可以使用type屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列,為默認值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。

          <ol>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ol>

          dl標簽定義了定義列表(definition list),dl標簽用于結(jié)合 dt(定義列表中的項目)和 dd(描述列表中的項目)。

          <dl>

          <dt>計算機</dt>

          <dd>用來計算的儀器 ... ...</dd>

          </dl>

          f、表格標簽

          table標簽和tr標簽,th標簽和td標簽,合并單元格。

          <table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

          <tr>

          <th>標題</th>

          <th>標題</th>

          </tr>

          <tr>

          <!-- 合并橫向單元格 -->

          <td colspan="2" nowrap="nowrap">&amp;nbsp;</td>

          </tr>

          <tr>

          <td></td>

          <!-- 合并縱向單元格 -->

          <td rowspan="2"> </td>

          </tr>

          <tr>

          <td height="16"> </td>

          </tr>

          </table>

          g、表單標簽

          form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼,需要提交的表單一定要放在form標簽內(nèi)。

          <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

          input標簽用于搜集用戶信息

          <input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

          密碼,輸入的字符會被掩碼(顯示為星號或原點)

          <input name="pwd" type="password" maxlength="5" size="100" value="" />

          文件類型的表單,上傳文件時,form表單一定要設置為enctype="multipart/form-data"

          <input type="file" name="file" />

          隱藏表單

          <input type="hidden" name="country" value="China" />

          提交

          <input type="submit" name="Submit" value="提交" disabled="disabled" />

          重置

          <input type="reset" name="Submit2" value="重置" />

          radio單選

          <input name="sex" type="radio" value="1" />男

          <input name="sex" type="radio" value="2" checked="checked" />女

          checkbox多選

          <input name="skill" type="checkbox" value="1" checked="checked" />PHP

          <input name="skill" type="checkbox" value="2" />前端

          <input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫

          <span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>

          label標簽為input元素定義標注,如果您點擊label元素文本,就會觸發(fā)此input控件。

          textarea標簽,設置文本區(qū)內(nèi)的可見行數(shù)和寬度

          <textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

          button標簽定義一個按鈕

          提交按鈕

          <button type="submit" value="提交">提交</button>

          重置按鈕

          <button type="reset" value="重置">重置</button>

          select標簽和option標簽下拉列表

          單選菜單列表框

          <select name="user">

          <option value="1">ray</option>

          <option value="2" selected="selected">raykaeso</option>

          </select>

          多選列表下拉框,shift加鼠標單擊,可以連續(xù)選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。

          <select name="user" size="10" multiple="multiple">

          <option value="1">雷雪松</option>

          <option value="2" selected="selected">ray</option>

          <option value="3">raykaeso</option>

          </select>

          注:selected="selected"可簡寫成selected,表示選中

          3、其他HTML事項

          a、HTML標簽和屬性是不區(qū)分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍。

          b、HTML標簽都是以開始標簽起始,以結(jié)束標簽終止。大部分HTML標簽都是成對出現(xiàn)的,稱為雙標簽,比如:p標簽、div標簽,也有的HTML標簽在開始標簽中結(jié)束的標簽,稱為單標簽,比如:hr標簽、br標簽。大多數(shù) HTML 元素可擁有屬性,文本內(nèi)容都是寫在開始標簽與結(jié)束標簽之間。

          c、HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護。

          d、HTML標簽使用必須符合標簽嵌套規(guī)則。禁止a標簽嵌套a標簽,p標簽嵌套div標簽。

          e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器。

          來源:PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽(http://www.leixuesong.cn/2045)


          主站蜘蛛池模板: 波多野结衣一区二区三区高清在线| 国产成人精品久久一区二区三区| 无码一区二区三区AV免费| 国产激情无码一区二区app| 伊人精品视频一区二区三区| 免费视频精品一区二区三区| 一区高清大胆人体| 国产一区在线视频观看| 国产午夜精品一区二区| 精品视频一区二区三区在线观看| 日本免费一区二区三区| 后入内射国产一区二区| 精品视频一区二区三三区四区| 在线欧美精品一区二区三区| 精品一区狼人国产在线| 久久久久国产一区二区| 51视频国产精品一区二区| 无码人妻一区二区三区精品视频| 日韩在线不卡免费视频一区| 国产一区韩国女主播| 在线播放偷拍一区精品| 波多野结衣免费一区视频 | 日韩精品无码一区二区三区AV| 久久se精品动漫一区二区三区| 国产精品综合一区二区三区| 国产伦精品一区二区三区| 日本一区二区三区精品国产| 久久久久人妻一区二区三区vr| 国产日韩高清一区二区三区| 精品国产一区二区三区AV | 国产电影一区二区| 国产精品无码一区二区三区电影| 国内精品一区二区三区在线观看| 亚洲国产精品一区二区第一页 | 精品一区二区三区在线播放| 国产欧美一区二区精品仙草咪 | 一区二区国产在线播放| 国产免费av一区二区三区| 国产成人av一区二区三区在线观看| 99无码人妻一区二区三区免费 | 无码av人妻一区二区三区四区|