整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
#中常見的按鍵事件
一般情況下，按下一個鍵時，事件的觸發順序是KeyDown -> KeyPress -> KeyUp。
C#語言中的KeyPress事件和KeyDown事件都是針對鍵盤按鍵響應的事件，其區別如下：
KeyPress事件在按下字符鍵時觸發，即按下字母、數字或符號鍵時觸發，而不會在按下控制鍵（例如Shift、Control、Alt等）時觸發，也就是說無法捕獲非打印字符和功能鍵（如F1-F12、Shift、Ctrl等）。該事件主要用于響應輸入字符的操作。
KeyPress事件的參數類型是KeyPressEventArgs，其包含了一個叫做KeyChar的屬性，表示按下的實際字符。例如，按下“A”鍵時，KeyChar的值為'A'。
KeyDown事件在按下任何鍵時都會觸發，包括字符鍵和控制鍵。它可以用于處理按鍵的狀態信息（例如是否按下Shift鍵等）以及響應輸入非字符的操作（例如方向鍵、回車鍵等）。
KeyDown事件的參數類型是KeyEventArgs，其包含了一個叫做KeyCode的屬性，表示按下的鍵的鍵碼值，可以通過該參數獲取按下的鍵的信息，如鍵的代碼、修飾鍵狀態等。例如，按下“A”鍵時，KeyCode的值為Keys.A，按下Shift鍵時，KeyCode的值為Keys.ShiftKey。
總結：
KeyPress事件主要用于捕獲字符鍵的按下動作，并獲取按下的字符。
KeyDown事件可以捕獲所有鍵的按下動作，包括字符鍵、非字符鍵和功能鍵，并提供更多鍵的信息。
兩者的含義和用途不同，需要根據具體的場景選擇合適的事件來處理鍵盤按鍵。
擊關注，靜心科技為您提供不一樣的靜心視角。
現如今，科技高速發展的速度已經遠遠超出我們的認知。移動支付、短視頻、共享經濟等全新互聯網科技模式已經完全改變了我們的生活方式。也許你還在思考過去的變化是如何發生，下一個深刻科技變革已經在我們身邊開始孕育發芽。
5G快速商業化，讓大家驚嘆這快速發展的通信技術的同時，開始期待5G會帶給我們什么變化。而這一切的改變，離不開互聯網的支撐。正是因為互聯網打通了國與國、人與人之間的知識壁壘，大范圍的知識分享促使科技的快速發展。
但是，目前有多少真正了解互聯網的人應該不多，甚至現在有很多人開始揚言互聯網已死。的確，互聯網已經淪為一種實用工具，我們想要獲取什么知識資源，只需要在網頁上搜索即可。但是當你輸入網址，并按下回車鍵之后，后面發生了什么？估計知道的人更少。
那普通大眾為什么要知道這背后過程的原因？
因為如果你知道互聯網的信息傳遞過程后，你就能夠解釋信息是如何從一臺電腦傳輸到另一臺電腦，你就能夠解釋為什么曾經一位華爾街的交易員耗資3億美元選擇鑿穿阿勒格尼山脈來修建一條筆直的光纜，你就能夠從另一個側面解釋為什么現在全球各國要大力發展5G網絡。
每天，我們都會打開某個瀏覽器，然后點擊或者輸入網址，如“toutiao.com”。或者借助百度、360等搜索引擎來搜索關鍵字獲取資料。但是當你按下回車，你選擇的網頁將出現在你的手機或者電腦屏幕上，你知道背后發生了什么？
在講述網頁之前，我們首先需要明白什么是網頁地址。每個網頁都有自己的地址，就像每一棟建筑都有自己的地址一樣，其表現形式如“https://www.toutiao.com/ch/news_tech/”。有了這個地址之后，不同的人就可以訪問到相同的網頁界面。網頁地址也就稱為“統一資源定位器”，簡稱URL。
但是當你在地址欄上輸入“toutiao.com”的時候，瀏覽器會自動補全URL的其他部分，變成“https://www.toutiao.com/”。那么URL的其他部分代表什么？當瀏覽器獲取到完整的URL之后，瀏覽器將URL分解成幾個部分，由此來確定需要打開那個網頁。
URL的第一部分為“https://”，也就是所謂的協議，該協議將定義瀏覽器該如何連接指定網站。目前訪問互聯網有兩種協議，超文本傳輸協議（簡稱HTTP，顯示為“http://”）以及超文本傳輸安全協議（簡稱HTTPS，，顯示為“https://”）。兩種協議基本沒有區別，唯一就是HTTPS會加密用戶信息，從而防止信息受到黑客的攻擊。
因此，一般如果你需要輸入密碼或者個人信息的時候，網站會要求使用HTTPS。
萬維網
URL的第二部分就是“www”，也就是我們經常說的萬維網，簡稱為Web。有些網頁地址會不顯示“www”，說明“www”并不是一定需要。但是為了URL的完整，一般網頁地址會顯示“www”。“www”就像是手機號的區號，一般情況是不需要自己輸入的。
而URL剩下的“toutiao.com”就是網站的“域名”。每個網站都有自己獨特的域名，但是瀏覽器并不是用域名連接網站，而是通過“IP地址”的數字代碼來連接網站。每個網站一般至少有一個“IP地址”，就像我們的手機號一樣。為了將域名轉化為“IP地址”，需要用到域名服務（簡稱DNS）。
域名服務就像是一個巨大的“電話簿”，列舉域名對應的“IP地址”。因此，瀏覽器會在硬盤上尋找緩存的“域名—IP地址”網頁訪問記錄。如果找不到，則會采用互聯網服務提供商（簡稱ISP）提供的DNS查找域名對應的“IP地址”。至此，瀏覽器知道如何通過HTTPS訪問IP地址對應的網頁，并將這個訪問請求打包給該網站對應的服務器。
DNS的查詢模式
網站服務器接收到訪問請求后，先會做一些計算來準備用戶訪問的界面，然后將呈現網頁所需的代碼發給瀏覽器。瀏覽器利用這段代碼在計算機和手機上顯示相應的網頁界面。自此，一個輸入網頁點擊回車后發生的全過程就完成。
現在，我們應該知道瀏覽器是如何通過互聯網連接網頁。但是，網站服務器是如何將用戶所需信息發送到手機上或者電腦上？信息的傳輸是一個循序漸進的過程，其中涉及到網絡傳輸協議（簡稱TCP）和互聯網協議（簡稱IP）。
由于網頁響應數據過大而無法一次發送，為此，TCP將數據信息分成許多“小包”，并為每個“小包”編號。然后服務器將通過DNS來查找用戶端的IP地址，并通過IP地址將數據發送給用戶端。由于目前很多網站服務器存在比較分散的原因，IP通過幾次轉移后，將數據包最終發送給用戶。
但是可以肯定的是，無論IP中轉多少次，最終數據包都會達到目的地。當用戶端接受到數據包后，TCP按照正確的順序重組數據，并檢查數據是否存在丟失的問題。如果存在數據丟失的問題，用戶端將再次請求網站服務器發送丟失的數據。
簡單來說，TCP工作就像是物流點的拆分和打包，而IP就像是物流快遞。掌握這些協議，你也就了解幾乎所有的通過互聯網獲取信息的全過程。無論是電腦訪問還是手機訪問，都會經歷同樣的過程。
數據包的傳遞路徑基本都是由一臺電腦傳輸到另一臺電腦，但是數據包并沒有直接直穿國家，而是必須遵循地理的限制，沿著物理光纜傳輸。這也是信息是如何實際從一臺電腦傳輸到另一臺電腦。
2008年，華爾街交易員丹尼爾·斯皮維在芝加哥證券交易所（芝加哥南環路）和納斯達克的服務器（新澤西州北部）之間搭建一條近乎筆直、長1327km的光纜。斯皮維嚴格要求筆直，導致施工人員不得不在阿勒格尼山脈中開鑿隧洞，造價高達3億美元。
為什么不選擇有迂回且施工簡單的路線？為什么熱衷搭建一條直線光纜？
光纜是信息傳遞的介質，信息在互聯網上傳輸的過程都要通過長長的地下光纜。光纜是由玻璃纖維組成，當計算機使用TCP/IP進行數據傳輸時，就需要光纜將計算機中的“0”、“1”轉化為光亮變化，其傳輸速度可達到光速的2/3。
兩點之間直線傳輸距離最短，但是光纜傳輸速度已經很快，為什么還需要近乎直線的光纜？這種極致追求傳輸速度是否讓我們理解這種開鑿山洞建造光纜的行為？
美國許多高頻交易股票就是在紐約證券交易所和芝加哥證券交易所進行交易。高頻交易就是利用兩所交易所細微的股價差異賺取差價。例如在紐約證券交易所以1.0美元買入，然后在芝加哥證券交易所以1.01美元賣出，這種套現的過程稍縱即逝，因此對互聯網傳輸速度就提出了很高的要求。
高頻交易
據測試，斯皮維的光纜在兩地之間的信息傳輸只需要13毫秒，比之前快了3秒。目前，光纜仍然是主要的數據傳輸介質，盡管仍有通過巨型激光在空氣中實現信息傳輸，但是由于其好耗能而沒有得到應用。
那么這種追求極致網速提升帶來的經濟效益到底有多大呢？目前沒有直接的數據表明，但是從“首批簽約使用這條光纜的200家高頻交易商愿意支付28億美元”這個事實就可以看出，這條光纜背后的經濟價值不可估量。
現如今，全球各國都在大力推動5G技術的發展，根本原因就是在于看重超大連接、超快寬帶、超低時延的5G網絡背后所帶動巨大經濟利益。
那么未來，大寬帶、大連接、低時延的5G網絡是否能夠代替光纜？很大概率是不可能的，根據香農定律，5G網絡的高頻導致網絡傳輸能耗縮減，因此也很難實現大范圍長距離傳輸。但是對于短距離的信息傳遞，5G網絡中繼也許能夠減少因光纜鋪設、鑿山洞等減少成本。
對于這種長距離基站之間的連接，光纜目前仍然是首選。但是基站到端之間的信息傳輸如果采用5G的話，勢必使得那些對時延要求過高的場景得以實現，例如自動駕駛、虛擬現實、云游戲等。
總而言之，互聯網通訊技術的發展不僅使得網絡傳輸速度更快，而且因網絡傳輸提速將會催生很多新的產業，從而帶動經濟的繁榮發展。
不斷涌現的新科技背后，離不開互聯網通訊技術的支撐。正是因為互聯網，世界資源的聯系也更加緊密，從而進一步推動科學技術的發展。
了解互聯網背后通信技術的實現過程，有助于我們掌握一些蘊含在互聯網技術背后的基本概念，進而理解一些互聯網科技發展過程中的一些現象，包括對互聯網傳輸速度的追求。未來網絡通訊技術也不會止于5G、6G，未來也必定有更多超出我們想象的事物發生。
你們怎么看互聯網通信技術，歡迎在下方留言評論。
使用Vue開發前端頁面的時候，難免會遇到接收的字符串過長，需要讓字符串換行。以往在HTML頁面開發中，常用的方法是word-wrap：break-word；添加上這行代碼后，在塊元素定義的寬度不夠時輸出的文本內容就會換行。但是在vue中使用word-wrap屬性就不起作用，網上查找資料說使用white-space：pre-line;就可以實現換行。本文就簡單介紹下white-space的使用。
因為我沒有系統的學過前端，就是遇到一點問題學習一點前端知識。當我在這次實現換行效果的過程中就學習使用了white-space的用法。
首先按照網上的資料，直接添加white-space：pre-line; 是實現了換行，但是換行卻是從第二行中間開始的。具體效果大概如下圖：
為什嗎會有這個效果呢？第一反應是有空格產生了，哪里來的空格呢？那就是接收的后端傳遞的字符串中有空格，于是就想辦法去處理接收的變量，嘗試了以下兩種方法：
（1）添加一層盒子嵌套，父盒子font-size：0，子盒子font-size：12px；
.tabBox_tit {
border: 1px solid red;
width: 175px;
height: 50px;
white-space: pre-line;
font-size: 0;
margin: 0 2px 0 10px;
letter-spacing: 1px;
box-sizing: border-box;
}
.tabBox_tit span {
font-size: 16px; /* 根據需求設置具體的字體大小 */
}
/*說明如下：
將 white-space 屬性的值從 pre-wrap 修改為 pre-line，這樣文本可以從第一行第一個字符輸出并且可以自動換行。
將 font-size 屬性的值設為 0，以去除在HTML中的空格（空格、回車等），避免產生不必要的空隙。
將 .tabBox_tit 框架內的文字大小設為 0 ，因為前面已經有了一個全局修改，
并通過 .tabBox_tit span 選擇器來單獨指定文字的大小，這樣可以避免子元素繼承父元素的字體大小。
*/
復制代碼（2）使用flex布局讓內容居中
.tabBox_tit {
border: 1px solid red;
width: 175px;
height: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
font-size: 16px; /* 根據需求設置具體的字體大小 */
margin: 0 2px 0 10px;
letter-spacing: 1px;
box-sizing: border-box;
}
/*
說明如下：
將 white-space 屬性去掉，因為使用 flex 屬性后不需要再用這個屬性來控制文本輸出。
添加 display: flex 屬性，并設置 flex-direction: column，這樣會將容器中的元素按列排列。
添加 justify-content: center 和 align-items: flex-start 屬性，這樣可以使文字垂直居中并從左側對齊。
*/
復制代碼經過以上兩種方式的設置，文本輸出樣式還是和上面的截圖一樣，從第二行中間開始輸出。這樣嘗試的時候，沒有實現效果，導致我懷疑自己flex布局的知識點沒有學好，又去重新溫習了一遍flex布局的文檔。改來改去一個小時就過去了。內心有點失敗的挫折感。這個時候，是不是就說明換行符號不是從變量里面傳遞過來的呢？
于是，再去查看代碼，發現了代碼被編輯器格式話之后換行了，在網上查找資料也終于瞅到有人說到這一點了。于是嘗試了修改VUE的模板代碼，代碼如下：
<!--修改后-->
<span class="tabBox_tit line1">
<span class="font-color-red" v-if="val.cart_info.is_gift">贈品</span>{{ val.cart_info.productInfo.store_name + ' | ' }}{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
</span>
<!--修改前 -->
<span class="tabBox_tit line1">
<span class="font-color-red" v-if="val.cart_info.is_gift">贈品</span>
{{ val.cart_info.productInfo.store_name + ' | ' }}
{{val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.suk: ''}}
</span>
復制代碼讓后，讓后我想要的功能就實現了。到這里不得不感慨前端的水真的很深，原來代碼格式化也并不是所有的代碼都可以使用的。
基于以上的折騰分析，總結一下，Vue實現輸出文本自動換行的效果：要做到以下兩點：1.HTML代碼塊不能格式化換行，2.使用white-space：pre-line; 這樣就可以了。
正常情況下到這里都應該寫完了。但是我又有點強迫癥，總覺得不能格式化的代碼不好看，或者以后不小心格式化了，文本輸出這里又出現問題豈不是很不美。于是去查下white-space這個屬性的定義，通過菜鳥教程學習到了更好的解決方法，附菜鳥截圖:
根據教程，知道了想實現換行效果又可以格式化代碼使用：white-space：normal；就可以了。
以上就是前端white-space屬性學習的痛苦經過。希望能幫助到你
作者：沐道PHP
鏈接：https://juejin.cn/post/7221341862116540471
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
