我需要在容器中包裝長文本

我在包裝文本的容器中出現問題。我已經搜索過，所有的答案都放在word-wrap: break-word;，但它不適合我。我必須做東西錯了，但我很難找到什麼。我需要在容器中包裝長文本

下面是網站，讓您可以通過源代碼搜索：http://www.simplistico.net/

任何幫助是極大的讚賞。

編輯：此外，容器背景是紅色的，所以你可以清楚地看到它。

2012-04-06 Amazonico

它在您的容器外面。爲什麼它不適合它？您應該指定一個寬度或在容器內移動它。 – j08691 2012-04-06 16:04:05

@ j08691情況並非如此（至少現在可能代碼已被糾正）。有一個錯誤的CSS文件。經過幾次修改，一切正常。請參閱下面的答案。 – 2012-04-06 16:54:17

我有一個類似的問題 - 我的文本沒有空格，所以沒有分成兩行。我知道這不是你的問題，但在這裏發佈，因爲它花了我一段時間才意識到它。 – flobacca 2013-04-03 20:13:32

爲什麼不在你的p標籤上設置一個寬度？

p { 
width:65%; 
}

編輯：

也許我應該更清楚。如果您已經在容器中放置了p標記，則不一定需要按照上述方法進行操作。你可以做類似的事情。

#container p { 
width:65%; 
}

這種方式只有指定容器內的p標籤受到影響。

默認情況下，p標記將拉伸其容器的100％。同時請記住，word-break和Word Wrap是CSS3屬性，並且僅在默認情況下適用於某些瀏覽器。 http://www.w3schools.com/cssref/css3_pr_word-break.asp

此外，分詞只會在容器的邊界處斷開。而且因爲您的另一個容器內部的p標籤默認寬度爲100％，超過了「紅色背景」容器。它將在該容器的邊界處打破。所以從技術上講，這是工作。

2012-04-06 16:01:08

@Amazonico這將是不好的做法，除非你真的希望每個頁面的每個段落的容器寬度爲65％。如果需要完全設計一些標籤（除非整個網站只是幾頁），'.someSpecialPlace p {}'將更爲可取。 – 2012-04-06 16:45:59

非常感謝你們。 Kris Hollenbeck和developdaly的答案相結合幫助解決了這個問題，並且它的定位正是我想要的。再次感謝你們！ – Amazonico 2012-04-06 16:57:57

沒有ZZ-BB，它對我很好。它只是幾頁，並提供了一些關於它們的一般信息。 – Amazonico 2012-04-06 16:58:45

如果你打算定位content，那麼你必須明確地給它一個寬度。

嘗試：

content { width: 600px; }

2012-04-06 16:28:14 developdaly

非常感謝你們。 Kris Hollenbeck和developdaly的答案相結合幫助解決了這個問題，並且它的定位正是我想要的。再次感謝你們！ – Amazonico 2012-04-06 16:56:25

首先你的CSS文件應該是.content {}（現在有一個錯字 - content {} - 所以它裏面什麼沒有任何效果什麼那麼）。

不知道HTML5標記<nav>所以我做了<ul>標記有一個類：<ul class="nav">。然後向css文件添加新樣式：nav {float:left}並刪除p{word-wrap: break-word;}樣式。這工作幾乎完美。紅色背景在內容結束的地方結束，因此需要照顧。

UPDATE：爲了讓紅色的背景色一路走下來添加CSS樣式.clearfloat{clear:both;}並投入HTML文件<br class="clearfloat" />的<content>內的最後一段。

UPDATE2：溝css文件的的.content的position和left屬性和調整的<nav>和<content>所以它們對齊邊緣。

2012-04-06 16:33:39

回答