首頁 web前端 html教學 解决浏览器显示长数字不能自动换行或长字母不能换行的问题_html/css_WEB-ITnose

解决浏览器显示长数字不能自动换行或长字母不能换行的问题_html/css_WEB-ITnose

Jun 24, 2016 am 11:56 AM
字母 換行 數位 顯示 自動

在网页中,如果出现长数字或长的字母组合时,如果不加以控制,它就会破坏网页的布局,控制不好可能就会显示不全,照成显示的数据丢失。虽然这种字符串一般不会出现,但是不加以控制,被某些有心的人钻了空子,就可能破坏整个网页的布局,得不偿失,今天我就来解决下这个问题。

首先看一下是什么问题:

例如:

11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd

是不是把博客园的布局都给毁了??

 

然后分析一下这个问题的原因:

个人认为长数字和长字母被认为是一个单词,安道理,一个单词是不应该被分割的,要一直显示下去,被分割后就没人认识了,所以浏览器就不给你换行,照成布局被毁坏!

 然后我就在博客园的闪存那里试了下会不会出现这个问题,发现谷歌浏览器正常

看了下代码,是 word-wrap: break-word; 这句话起的作用,这句话的意思就是 内容将在边界内换行

去掉后就会变成这样

看来我们的问题已经解决了,但是ie浏览器就没有这么好了,请看下图:

没有变化,只是一大长条的数字,没有换行!

解决的方法是:在那一条长数字的外面加一个

标签就好了

请看解决后的ie的样子:

谷歌浏览器的样子:

完美解决!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Stremio字幕不工作;載入字幕時出錯 Stremio字幕不工作;載入字幕時出錯 Feb 24, 2024 am 09:50 AM

Stremio字幕不工作;載入字幕時出錯

在Linux上自動裝載驅動器 在Linux上自動裝載驅動器 Mar 20, 2024 am 11:30 AM

在Linux上自動裝載驅動器

桌面佈局已鎖定的原因及解決方法 桌面佈局已鎖定的原因及解決方法 Feb 19, 2024 pm 06:08 PM

桌面佈局已鎖定的原因及解決方法

BarTender中如何換行-BarTender中換行的方法 BarTender中如何換行-BarTender中換行的方法 Mar 05, 2024 pm 07:52 PM

BarTender中如何換行-BarTender中換行的方法

如何讓遠端桌面連線顯示對方的工作列 如何讓遠端桌面連線顯示對方的工作列 Jan 03, 2024 pm 12:49 PM

如何讓遠端桌面連線顯示對方的工作列

excel表格該怎麼換行 excel表格該怎麼換行 Feb 09, 2024 pm 02:00 PM

excel表格該怎麼換行

在蘋果電腦上如何實現Excel單元格換行 在蘋果電腦上如何實現Excel單元格換行 Feb 18, 2024 pm 08:39 PM

在蘋果電腦上如何實現Excel單元格換行

蘋果手機怎麼換行 蘋果手機設定換行的操作步驟 蘋果手機怎麼換行 蘋果手機設定換行的操作步驟 Mar 22, 2024 pm 06:50 PM

蘋果手機怎麼換行 蘋果手機設定換行的操作步驟

See all articles