【bug庫】Safari瀏覽器white-space:nowrap不生效

only_do 發(fā)布于2019-08-30 15:56 / 3582人閱讀

摘要：復(fù)現(xiàn)驗證瀏覽器顯示例子藍(lán)天白云花朵瀏覽器顯示例子藍(lán)天白云花朵總結(jié)文本不會換行，文本會在同一行上連續(xù)，直到遇到標(biāo)簽位置瀏覽器沒有對屬性生效疑問為什么在瀏覽器中沒有生效呢

問題描述：

上傳一個關(guān)鍵詞csv文件，以換行符為分割點，上傳后將文件內(nèi)容展示在頁面上，
在safari瀏覽器下顯示結(jié)果異常，關(guān)鍵詞都在一行顯示，沒有換行

排查原因：

代碼里不知怎么添加了white-space:nowrap;這個屬性導(dǎo)致了bug現(xiàn)象。

復(fù)現(xiàn)驗證：

Safari瀏覽器 顯示
例子： 藍(lán)天 白云 花朵

chrome瀏覽器 顯示
例子： 藍(lán)天 
      白云 
      花朵

總結(jié)：

 white-space:nowrap;
 文本不會換行，文本會在同一行上連續(xù)，直到遇到
標(biāo)簽位置

safari瀏覽器沒有對 white-space:nowrap屬性生效

疑問：
為什么在safari瀏覽器中沒有生效呢？

GPU云服務(wù)器云服務(wù)器 safari擴(kuò)展瀏覽器 safari不支持webrtc Webrtc 不支持safari 緩存不生效

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117580.html

相關(guān)文章

vue移動端復(fù)雜表格表頭，固定表頭與固定第一列

摘要：固定的表格頭部與第一列的寬高行高都是通過獲取真實的表格的寬高來設(shè)定的。通過展示的表格的上下滾動從而帶動固定在第一列的向上滾動，向左右滾動帶動覆蓋上表頭的的左右滾動。 showImg(https://segmentfault.com/img/remote/1460000015798687); 前言最近做移動端的h5項目，要做一個可配置表頭的復(fù)雜表格，網(wǎng)上找了很久也沒什么好方法，結(jié)合網(wǎng)上...

sarva 2019-08-23 10:26 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個人感覺跟類似強(qiáng)行截斷英文單詞，達(dá)到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強(qiáng)制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0
CSS 文本控制

摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級版，當(dāng)單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。 one more time one more chance. 一歩重頭學(xué)前端, css入門。學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請大家對照下面列表檢驗下：會的、不會的、似懂非懂的。筆者是一個也不會。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 評論0 收藏0
CSS樣式

摘要：獨孤九劍常用樣式首行縮進(jìn)一個文字大小文字修飾刪除線上劃線下劃線詞間距字母間距的區(qū)別使用瀏覽器默認(rèn)的換行規(guī)則。其行為方式類似中的標(biāo)簽。只對英文起作用，以單詞作為換行依據(jù)。不換行，超出部分隱藏且以省略號形成出現(xiàn)?？▽毜洌?【1】相鄰的2個margin值會疊加在一起。【2】子元素設(shè)定的margin值會影響父元素。 ? ? ? ? ? 在標(biāo)準(zhǔn)瀏覽器下（FireFox，Chrome，Opera，S...

SwordFly 2019-04-23 11:48 評論0 收藏0
css超過一定長度顯示點點

摘要：用來限制在一個塊元素顯示的文本的行數(shù)。為了實現(xiàn)該效果，它需要組合其他的屬性。常見結(jié)合屬性必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示。，可以用來多行文本的情況下，用省略號隱藏超出范圍的文本。 Text-overflow: clip | ellipsis作用:文本溢出簡單的裁切 Text-overflow: clip 表示不顯示省略標(biāo)記（...），只是簡單的裁切，需要配合overflo...

PumpkinDylan 2019-08-29 12:22 評論0 收藏0