資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 防止文字佔用超過一行？
網頁上的內容以我們已經學過的多種形式進行組織，例如圖層、段落、行、表格和分割槽。所有 HTML 標籤及其內容在網頁上的適當定位被稱為文字組織。預設情況下，Web 瀏覽器會封裝網頁上的文字並將其顯示在一個塊中，從而消除行和段落換行符。如果頁面內容沒有被任何行或段落換行符分割，那麼讀者現在很難理解提供的資訊。
組織良好的網站內容可以提高可用性和搜尋引擎最佳化，減少使用者煩惱，並在訪問者訪問您的網站時培養好感。在 HTML 文件中組織文字對於開發人員來說始終是一項繁瑣的任務。在本文中，我們將討論如何在使用 CSS 時對文件中的文字進行排序。
首先，讓我們瞭解一下網頁上的文字溢位是什麼。
文字溢位
在 CSS 中，每個元素都是一個盒子。透過為這些盒子的寬度和高度設定值，您可以限制它們的大小（或內聯大小和塊大小）。當內容過多而無法容納在盒子內時，就會發生溢位。CSS 提供了許多管理溢位的技術。隨著您練習 CSS 佈局和創作，將出現更多溢位例項。
示例
<!DOCTYPE html>
<html>
<head>
<title> Overflow of Text </title>
<style>
h1{
text-align: center;
color: #FF0000;
text-decoration: underline;
}
.container {
border: 3px solid black;
width: 200px;
height: 100px;
position: absolute;
left: 40%;
}
</style>
</head>
<body>
<h1> Overflow of text </h1>
<div class= "container"> This box has a height of 100px and a width of 200px. So, in case there is extra content (text) which could not fit inside the container, overflow occurs. In this example, we can see our text overflowing out of the container specified. </div>
</body>
</html>
在本文給出的示例中，文字溢位了容器。CSS 的 overflow 屬性用於組織此文字溢位。
排序文字溢位
CSS 使開發人員能夠對文字溢位進行排序。此外，我們可以使用 CSS 屬性控制或防止文字佔用超過一行。為了調節或禁止一段文字上的換行符，可以使用各種 CSS 屬性。這些屬性如下所示：
Overflow 屬性
CSS 的overflow 屬性用於確定當元素的內容變得足夠大以至於超出容器（指定區域）時，是否需要裁剪內容或新增捲軸。
overflow 屬性只能應用於塊級元素。此屬性的值必須針對兩個特定的軸指定 - X 軸和 Y 軸。我們在overflow-x 和overflow-y 下指定這些。它具有以下值：
visible- 預設值。溢位的內容顯示在容器外部。它不會被裁剪。
hidden- 溢位的（額外的）內容變得不可見，即它不會顯示在螢幕上。
clip- 額外的內容變得不可見，同時溢位被裁剪。但是，使用此屬性不會啟用滾動。
auto- 瀏覽器本身會檢測溢位並相應地新增捲軸。
scroll- 新增捲軸。這使我們能夠透過滾動元素來檢視額外內容。
Whitespace 屬性
可以使用此 CSS 屬性控制元素邊框內的空白（包含內容的空白）。如果此屬性設定為nowrap，則元素內的文字將只有一行長，但仍可能有一些文字溢位元素的邊界。
語法
element{
white-space: values;
}
它具有以下值：
Normal - 這是預設值。多個空格最終會合併為一個空格。文字將根據需要自動換行。
Nowrap - 多個空格後，空格將合併為一個空格。文字不會換行。在標籤之前，文字保持在同一行。
Pre-line - 多個空格後，空格將合併為一個空格。文字在需要時換行，並在換行符處換行。
Pre-wrap – 空格由瀏覽器調節。文字在需要時換行，並在換行符處換行。
Pre- 文字在換行符處換行。
Text-overflow 屬性
此 CSS 屬性使開發人員能夠指定不應顯示的溢位內容如何顯示給使用者。它可以被裁剪，可以顯示省略號（…），或者可以顯示自定義字串。
語法
element{
text-overflow: values;
}
值為clip, string, ellipses, initial 和inherit。
示例
<!DOCTYPE html>
<html>
<head>
<title>Organizing text overflow</title>
<style>
* {
margin: 10px;
padding: 5px 5px 10px;
}
div {
width: 70%;
height: 10px;
border: 2px solid blue;
}
.box1 {
white-space: nowrap;
}
.box2 {
overflow: hidden;
}
.box3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1> Example </h1>
<h2> How to prevent text from occupying more than one line? </h2>
<div>
We'll look at how to prevent text from occupying more than one line. The following CSS properties can be used to do:
</div>
<h2> White-space Property </h2>
<div class= 'box1'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
<h2> Overflow Property </h2>
<div class= 'box2'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
<h2> Text-overflow Property</h2>
<div class= 'box3'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
</body>
</html>
結論
無論您是從頭開始設計佈局還是修改已建立的佈局，溢位都是您可能遇到的常見問題。如果您知道如何調節溢位，則可以在不影響對齊或放置的情況下開發和個性化您的佈局。在本文中，我們討論瞭如何使用不同的 CSS 屬性在網頁中組織和排序文字溢位。
2K+ 瀏覽量
