整合營銷服務商

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

          免費咨詢熱線:

          HTML技巧篇:如何讓單行文本以及多行文本溢出顯示省略號(……)

          篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。

          1)單行文本溢出顯示省略號

          當我們在編寫網(wǎng)頁代碼的時候,肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度,導致文本換行或者文本超出了界限,這時有人就會說了,讓后臺限制一下調(diào)用的文字個數(shù)不就行了嗎,但是我們在做響應式的時候由于是百分比布局,無法計算一行會顯示多少個文字,所以這并不是一個好的解決方案,我們使用css3就可以輕松的實現(xiàn),而且簡單好用。

          核心css語句:

          1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內(nèi)容)

          2、white-space: nowrap; (設置文字在一行顯示不能換行)

          3、text-overflow: ellipsis;(規(guī)定當文本溢出時顯示省略符號來代表被修剪的文本)

          我們具體的代碼效果演示就如下圖所示:(設置ul寬度為300,超出的文字內(nèi)容讓其自動隱藏并顯示...)

          2)多行文本溢出顯示省略號

          我們在編寫網(wǎng)頁代碼時,有時候新聞列表頁中新聞簡介可能有一行或者多行,我們要如何處理這種問題,讓其超出多行后還能顯示省略號呢,不要慌,我們css還是很強大的,已經(jīng)給我們提供了方法來處理這種問題了。

          核心css語句:

          1、-webkit-line-clamp:2; (用來限制在一個塊元素顯示的文本的行數(shù),2表示最多顯示2行。 為了實現(xiàn)該效果,它需要組合其他的WebKit屬性)

          2、display: -webkit-box; (和1結(jié)合使用,將對象作為彈性伸縮盒子模型顯示 )

          3、-webkit-box-orient:vertical;( 和1結(jié)合使用 ,設置或檢索伸縮盒對象的子元素的排列方式 。)

          4、overflow:hidden; (顧名思義超出限定的寬度就隱藏內(nèi)容)

          5、text-overflow: ellipsis;(規(guī)定當文本溢出時顯示省略符號來代表被修剪的文本)

          我們具體的代碼效果演示就如下圖所示:(設置段落p寬度為300,超出2行的文字內(nèi)容讓其自動隱藏并顯示...)

          好了,本篇文章就給大家說到這里,大家自己下來可以自己找例子寫一下試一試到底能不能實現(xiàn)我們所說的效果,以后在寫頁面的的遇到這種問題的時候直接復制使用即可。

          每日金句:必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          世界有超過 1000 萬 Javascript 開發(fā)人員,而且這個數(shù)字每天都在增加。盡管 JavaScript 以其動態(tài)特性而聞名,但它還具有許多其他出色的特性。在這篇博客中,我們將看到 10 個有用的 JavaScript 單行代碼,你應該知道它們來提高你的工作效率。

          1、生成一個范圍內(nèi)的隨機數(shù)

          在很多情況下,我們需要在一個范圍內(nèi)生成一個隨機數(shù)。Math.random() 函數(shù)可以為我們生成一個隨機數(shù),然后我們可以將其轉(zhuǎn)換為我們想要的范圍。

          
          const max = 20;
          const min = 10;
          // Math.floor() 返回小于或等于一個給定數(shù)字的最大整數(shù)。
          // Math.random() 返回一個浮點型偽隨機數(shù)字,在0(包括0)和1(不包括)之間。
          const random = Math.floor(Math.random() * (max - min + 1)) + min;
          console.log(random);
          //output: 17
          //output: 10
          

          2、反轉(zhuǎn)字符串

          有幾種不同的方法可以反轉(zhuǎn)字符串。這是最簡單的一個,使用 split()reverse()join() 方法。

          ?split() 方法使用指定的分隔符字符串將一個String對象分割成子字符串數(shù)組。 ?reverse() 方法將數(shù)組中元素的位置顛倒,并返回該數(shù)組?join() 方法將一個數(shù)組(或一個類數(shù)組對象)的所有元素連接成一個字符串并返回這個字符串。如果數(shù)組只有一個項目,那么將返回該項目而不使用分隔符。

          reverse = (str) => str.split('').reverse().join('');
          const str = 'hello world';
          console.log(reverse(str));
          // output: dlrow olleh
          

          3、生成一個隨機的十六進制碼

          適用于元素隨機顏色生成的場景

          ?padEnd() 方法會用一個字符串填充當前字符串(如果需要的話則重復填充),返回填充后達到指定長度的字符串。從當前字符串的末尾(右側(cè))開始填充。

          '#' +
             Math.floor(Math.random() * 0xffffff)
                .toString(16)
                .padEnd(6, '0');
          console.log(color);
          //output: #ed19ed

          4、數(shù)組隨機排序

          在使用隨機算法時,數(shù)組的隨機排序是一項經(jīng)常用到的場景,在 JavaScript 中,我們沒有模塊像python 中的 random.shuffle() 方法一樣實現(xiàn)數(shù)組元素的隨機排序,但仍然有一種方法只需一行代碼就可以將數(shù)組的所有元素隨機排序。

          const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
          const arr = Array.from({ length: 10 }, (_, i) => i + 1);
          console.log('array: ', arr);
          console.log('shuffled array: ', shuffleArray(arr));
          //output:
          // array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
          // shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]

          5、滾動到頂部/滾動到底部

          初學者經(jīng)常會發(fā)現(xiàn)自己很難正確地將元素滾動到視圖中。滾動元素最簡單的方法是使用 scrollIntoView() 方法。

          //Add behavior: "smooth" for a smooth scrolling animation.
          const scrollToTop = (element) =>
             element.scrollIntoView({ behavior: 'smooth', block: 'start' });
          const scrollToBottom = (element) =>
             element.scrollIntoView({ behavior: 'smooth', block: 'end' });

          6、檢查是否有人在使用暗色主題

          如果您希望您顯示的內(nèi)容遵循使用您網(wǎng)站的人的配色方案,JavaScript 包含一種檢測某人是否使用暗色主題的方法,以便您可以相應地調(diào)整顏色。

          const isDarkMode1 =
             window.matchMedia &&
             window.matchMedia('(prefers-color-scheme: dark)').matches;
          // 如果您想將其用作函數(shù)
          const isDarkMode2 = () =>
             window.matchMedia &&
             window.matchMedia('(prefers-color-scheme: dark)').matches;
          console.log(isDarkMode1);
          console.log(isDarkMode2());
          //output:
          // true
          // true

          7、復制到剪貼板

          將文本復制到剪貼板非常有用,也是一個難以解決的問題。您可以在網(wǎng)上找到各種解決方案,但下面的解決方案可能是最簡潔和最聰明的解決方案之一。

          const copyToClipboard = (text) =>
             navigator.clipboard?.writeText && navigator.clipboard.writeText(text);

          8、獲取兩個日期之間的天數(shù)

          確定如用戶的年齡時,你必須計算從某個時間點到現(xiàn)在已經(jīng)過去的天數(shù)。

          const ageDays = (old, recent) =>
             Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';
          const firstDate = new Date('2021-06-10');
          const secondDate = new Date('2022-03-03');
          console.log(ageDays(firstDate, secondDate));
          // output: 266 Day(s)

          9、獲取隨機布爾值

          Javascript 中的 Math.random 函數(shù)可用于生成范圍之間的隨機數(shù)。要生成隨機布爾值,我們需要隨機獲取 0 到 1 之間的數(shù)字,然后檢查它是大于還是小于 0.5。

          const randomBoolean = () => Math.random() >= 0.5;
          console.log(randomBoolean());
          // output: false

          10、 檢查當前用戶是否在蘋果設備上

          我們可以使用 navigator.platform 來檢查瀏覽器運行的平臺。

          const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
          console.log(navigator.platform);
          console.log(isAppleDevice);
          // output:
          // Win32
          // false

          注意:此屬性的推薦替代方案是 navigator.userAgentData.platform。但是,navigator.userAgentData.platform 還沒有被一些主流瀏覽器支持,并且定義它的規(guī)范還沒有被任何標準組采用(具體來說,它不是 W3C 或 WHATWG 發(fā)布的任何規(guī)范的一部分)。

          個 JS 開發(fā)人員都應該使用 javascript one liner 來提高生產(chǎn)力和技能,所以今天我們討論一些可以在日常開發(fā)生活中使用的 one liner。

          1.對數(shù)組進行排序

          使用 sort 方法對數(shù)組進行排序非常簡單。

          const number = [2,6,3,7,8,4,0];
          number.sort();
          // expected output: [0,2,3,4,6,7,8]
          

          2.檢查數(shù)組中的值

          很多時候我們需要檢查值是否存在于數(shù)組中,借助 include 方法。

          const array1 = [1, 2, 3];
          console.log(array1.includes(2));
          // expected output: true
          

          3.過濾數(shù)組

          const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
          const result = words.filter(word => word.length > 6);console.log(result);
          
          // expected output: Array ["exuberant", "destruction", "present"]
          

          4.從數(shù)組中查找元素

          如果你只需要一個元素,但你在數(shù)組中獲得了很多元素,不要擔心 JavaScript 有 find 方法。

          const array1 = [5, 12, 8, 130, 44];
          const found = array1.find(element => element > 10);
          console.log(found);
          // expected output: 12
          

          5.查找數(shù)組中任何元素的索引

          要查找數(shù)組中元素的索引,您可以簡單地使用 indexOf 方法。

          const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
          console.log(beasts.indexOf('bison'));
          // expected output: 1
          

          6.將數(shù)組轉(zhuǎn)換為字符串

          const elements = ['Fire', 'Air', 'Water'];
          console.log(elements.join(", "));
          // expected output: "Fire, Air, Water"
          

          7.支票號碼是偶數(shù)還是奇數(shù)

          很容易找出給定的數(shù)字是偶數(shù)還是奇數(shù)。

          const isEven = num => num % 2 === 0;
          or
          const isEven = num => !(n & 1);
          

          8.刪除數(shù)組中的所有重復值

          刪除數(shù)組中所有重復值的一種非常簡單的方法

          const setArray = arr => [...new Set(arr)];const arr = [1,2,3,4,5,1,3,4,5,2,6];
          setArray(arr);
          // expected output: [1,2,3,4,5,6]
          

          9.合并多個數(shù)組的不同方式

          // merge but don't remove duplications
          const merge = (a, b) => a.concat(b);
          or
          const merge = (a, b) => [...a, ...b];// merge with remove duplications
          const merge = (a, b) => [...new Set(a.concat(b))];
          or
          const merge = (a, b) => [...new Set([...a, ...b])];
          

          10.滾動到頁面頂部

          有很多方法可以將頁面滾動到頂部。

          const goToTop = () => window.scrollTo(0,0, "smooth");
          or
          const scrollToTop = (element) => element.scrollIntoView({behavior: "smooth", block: "start"});
          // scroll to bottom of the page
          const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);
          

          11.復制到剪貼板

          在 Web 應用程序中,復制到剪貼板因其對用戶的便利性而迅速普及。

          const copyToClipboard = text => (navigator.clipboard?.writeText ?? Promise.reject)(text);
          

          以上就是今天跟你分享的11個JavaScript的單行代碼技巧,希望你能從中學到新的知識。

          想了解更多精彩內(nèi)容,歡迎關注千鋒教育!


          主站蜘蛛池模板: 交换国产精品视频一区| 少妇特黄A一区二区三区| 欧美激情一区二区三区成人| 亚洲av乱码一区二区三区香蕉| 亚洲视频在线观看一区| 亚洲蜜芽在线精品一区| 中文字幕av一区| 精品免费AV一区二区三区| 国产一区二区精品尤物| 亚洲一区中文字幕久久| 国产乱码精品一区二区三区四川人 | 午夜无码一区二区三区在线观看| 一区二区在线视频免费观看| 寂寞一区在线观看| 亚洲av日韩综合一区二区三区| 美女福利视频一区二区| 国产日韩一区二区三区在线观看| 国产精品一级香蕉一区| 全国精品一区二区在线观看| 久久青草国产精品一区| 天堂成人一区二区三区| 少妇无码AV无码一区| 老熟妇高潮一区二区三区| 韩国福利一区二区三区高清视频 | 精品国产一区二区三区四区| 精品国产一区在线观看| 精品一区二区三区在线视频| 在线播放偷拍一区精品| 国产亚洲一区二区三区在线不卡 | 国产免费av一区二区三区| 国产成人无码精品一区二区三区 | 亚洲中文字幕丝袜制服一区 | 久久一区二区三区99| 亚洲欧美日韩中文字幕在线一区 | 国产大秀视频一区二区三区| 日韩免费无码一区二区三区| 美女福利视频一区二区| 国产乱码一区二区三区四| 嫩B人妻精品一区二区三区| 国产成人精品亚洲一区 | 国产一区二区在线视频播放|