css數位文字過長被隱藏了怎麼辦-css教學-PHP中文網

首頁

web前端

css教學

css數位文字過長被隱藏了怎麼辦

青灯夜游

Sep 29, 2021 pm 05:54 PM

css自動換行

css數字文字過長被隱藏的解決方法：1、開啟對應的HTML檔；2、使用「word-break」屬性，為包含數字的元素加上「word-break:break-all; ”樣式，讓數字文字自動換行即可全部顯示出來即可。

css數位文字過長被隱藏了怎麼辦

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

連續的數字文字是無法自動換行的，

css數位文字過長被隱藏了怎麼辦

#如何過長且容器元素又設定了overflow: hidden;樣式，那麼超出的部分會被隱藏。

css數位文字過長被隱藏了怎麼辦

這時候我們，可以透過設定文字自動換行來將數字全部顯示出來。

而想要設定自動換行，就需要使用word-break屬性，該屬性可以讓瀏覽器實作在任意位置換行。

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" id="remove">
		<style>
			div{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				overflow: hidden;
				word-break:break-all;
			}
		</style>
	</head>

	<body>
		<div>11111111111111111111111111111111111111111111111</div>
	</body>
</html>

效果圖：

css數位文字過長被隱藏了怎麼辦

#說明：

word-break 屬性規定自動換行的處理方法。

語法：word-break: normal|break-all|keep-all;

normal 使用瀏覽器預設的換行規則。
break-all 允許在字內換行。
keep-all 只能在半角空格或連字號處換行。

相關介紹：

1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。 1994年，Web真正走出實驗室。

從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。

隨著HTML的成長，為了滿足頁面設計者的要求，HTML增加了許多顯示功能。但隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。

1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，於是他們決定一起設計CSS。

其實當時在網路界已經有過一些統一樣式表語言的建議了，但CSS是第一個含有「層疊」豐意的樣式表語言。在CSS中，一個檔案的樣式可以從其他的樣式表中繼承。讀者在有些地方可以使用他自己喜歡的樣式，在其他地方則繼承或「層疊」作者的樣式。這種層疊的方式使作者和讀者都可以靈活地加入自己的設計，混合每個人的愛好。

哈坤於1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網絡會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支援CSS的Arena瀏覽器。

同年，W3C組織（World WideWeb Consortium）成立，CSS的創作成員全部成為了W3C的工作小組並且全力以赴負責研發CSS標準，層疊樣式表的開發終於走上正軌。有越來越多的成員參與其中，例如微軟公司的托馬斯·萊爾頓(Thomas Reaxdon)，他的努力最終令Internet Explorer瀏覽器支援CSS標準。哈坤、波斯和其他一些人是這個計畫的主要技術負責人。 1996年底，CSS初稿已經完成，同年12月，層疊樣式表的第一份正式標準（Cascading style Sheets Level 1）完成，成為w3c的建議標準。

1997年初，W3C組織負責CSS的工作小組開始討論第一版中沒有涉及的問題。其討論結果組成了1998年5月出版的CSS規範第二版。

相關推薦：《css影片教學》

以上是css數位文字過長被隱藏了怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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