在HTML/CSS

不是包裝很長的話，我有一個問題，即如果用戶正在進入一個長註釋/字，如「cooooooooooooooooooooooooooooooooooooooool」這將破壞網頁上的格式。在HTML/CSS

這裏是下面的圖像，以幫助解釋情況（不按比例），也使用的代碼：

enter image description here

HTML：

<div class="comment-content"> 
    <p>cooooooooooooooooooooooooooooooooooooooool</p> 
    <br /> 
    <a class="delete-comment" data-delete-comment-id="28" href="/">Delete</a> 
</div>

的CSS：

.comment-content 
{ 
    width: 525px; 
    margin: 13px 25px 0 0; 
} 
.comment-content p 
{ 
    width: 525px; 
}

我想知道如果有一個快速修復這個不改變太多的標記和CSS，因爲這是代碼的領域，我們不希望通過更改應用程序代碼（寫在ASP.NET/MVC 3）引入錯誤。

如果CSS/HTML是不是一種選擇，我猜的HTML 5 <wbr>標籤可以用於之後的字符「X」量單獨字 - 這個唯一的問題是，該網站是在9種語言的多語種。例如日文和中文，文本字符顯着大於英文文本字符，在添加<wbr>或減小字體大小之前，需要使用多個條件代碼來獲取字符數。就在真正的最佳解決方案的建議之後。

非常感謝

來源

2012-12-05 Danny Brady

嘗試輸入標籤 –

試試這個

.comment-content p { 
    word-wrap: break-word; 
}

Live Demo

More Information

來源

2012-12-05 11:30:29

給人最大長度這完全解決了這個問題。謝了哥們！ –

在任意點打破字符串幾乎不是一個完美的解決方案。它扭曲了內容，將「foobar」變成「foob ar」或「fooba r」。對於任何真實的解決方案，必須定義處理文本內容的原則。 –

這可能會幫助：

.class { 
    resize:none; 
}

來源

2012-12-05 11:35:16

如果你想它很好地被皚皚爲：OOOOOO ... 使用：

.comment-content .p{ 
    display:inline-block; 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow: ellipsis; 
}

如果有一個以上的線，使用

.comment-content .p{ 
    word-wrap: break-word; 
}

來源

2012-12-05 11:41:25 Sanne

但事實上我對你的第一個答案使用以及其羅希特張貼的答案，爲我工作。感謝您的貢獻！ –

回答

相關問題