HTML+CSS 3绉嶄笉鎹㈣鐨勬柟娉

鍦ㄧ綉椤靛紑鍙戜腑锛屾垜浠粡甯镐細閬囧埌闇瑕佹帶鍒舵枃鏈笉鎹㈣鐨勬儏鍐点備笉绠℃槸闀垮彞瀛愩佷唬鐮佽繕鏄〃鏍肩殑鍐呭锛屾湁鏃舵垜浠笇鏈涘叾鍦ㄦ樉绀烘椂淇濇寔鍗曡鏄剧ず锛岃屼笉浼氳嚜鍔ㄦ崲琛屻備笅闈㈠皢浠嬬粛鍑犵甯哥敤鐨勬柟娉曟潵瀹炵幇杩欎釜鏁堟灉銆

1. 浣跨敤CSS 鐨 white-space 灞炴э細
   white-space 灞炴х敤浜庤缃厓绱犲唴鐨勭┖鐧藉浣曞鐞嗐傚叾涓紝鍊间负 nowrap 鍙互闃叉鏂囨湰鑷姩鎹㈣銆傞氳繃灏嗚灞炴у簲鐢ㄤ簬瑕佹帶鍒剁殑鍏冪礌锛屽彲浠ョ‘淇濇枃鏈湪瓒呰繃鍏冪礌瀹藉害鏃朵笉浼氳嚜鍔ㄦ崲琛屻

   ```css
   .nowrap {
     white-space: nowrap;
   }
   ```

   鐒跺悗锛屽皢璇ョ被搴旂敤浜庨渶瑕佷笉鎹㈣鐨勫厓绱狅細

   ```html
   杩欐槸涓涓笉鎹㈣鐨勬钀姐
   ```

2. 浣跨敤CSS 鐨 overflow 灞炴э細
   overflow 灞炴х敤浜庢帶鍒跺厓绱犲唴瀹规孩鍑烘椂鐨勫鐞嗘柟寮忋傞氳繃灏嗗叾鍊艰缃负 hidden锛屽彲浠ラ槻姝㈠唴瀹规崲琛屽苟闅愯棌婧㈠嚭閮ㄥ垎銆

   ```css
   .no-wrap {
     overflow: hidden;
   }
   ```

   鐒跺悗锛屽皢璇ョ被搴旂敤浜庨渶瑕佷笉鎹㈣鐨勫厓绱狅細

   ```html
   杩欐槸涓涓笉鎹㈣鐨勬枃鏈銆
   ```

3. 浣跨敤HTML 鐨 non-breaking space 瀹炰綋锛
   HTML 涓殑 non-breaking space 瀹炰綋锛 锛夊彲浠ヤ唬琛ㄤ竴涓笉闂存柇鐨勭┖鏍硷紝灏嗗叾鎻掑叆鍒版枃鏈腑锛屽彲浠ラ槻姝㈡崲琛屻

   ```html
   杩欐槸涓涓笉鎹㈣鐨 鏂囨湰銆
   ```

   娉ㄦ剰锛氱敱浜 non-breaking space 瀹炰綋浠嶇劧鍗犵敤浜嗙┖闂达紝鍥犳闇瑕佹牴鎹疄闄呴渶姹傝皟鏁村厓绱犵殑瀹藉害銆

閫氳繃涓婅堪鏂规硶锛屾垜浠彲浠ヨ交鏉惧湴鎺у埗鏂囨湰鍦℉TML+CSS 涓殑涓嶆崲琛屾樉绀烘晥鏋溿傛牴鎹疄闄呴渶姹傚拰鍏蜂綋鍦烘櫙锛岄夋嫨鍚堥傜殑鏂规硶鏉ュ疄鐜版渶浣崇殑灞曠ず鏁堟灉銆傚笇鏈涗互涓婃柟娉曡兘瀵规偍鏈夋墍甯姪锛

浠ヤ笂灏辨槸HTML+CSS 3绉嶄笉鎹㈣鐨勬柟娉曠殑璇︾粏鍐呭锛屾洿澶氫俊鎭鍏虫敞OD浜戝叾瀹冪浉鍏虫枃绔狅紒



鏈枃URL锛http://www.odweb.cn/news_show.html?id=295