如何動態地使文本適合區域正方形

我正在設計一個類似於http://Obvious.com（將轉移到中）的佈局質量的網站。我注意到他們的佈局有一些很棒的事情，有一個方面我不知道該怎麼做。如何動態地使文本適合區域正方形

在主頁上，當涉及到每個博客帖子標題下方的文本行時，我發現總是存在一個固定區域，文本在文本區域內整齊地排列。如果標題更長，則下面的文字會作相應的調整。

這是如何完成的？我已經嘗試過一種方法來計算字符串中的字符數量，並且當標題更長時，所選字符數量少於x個字符......但是當這樣做時，有時候只有一個或兩個字符會掛入下一個字符因此線條不均勻。（我不想看起來不均勻）

那麼有沒有辦法確保文本始終適合行尾？而文字的數量會根據標題WHILE擬合的大小而改變？

這是一個PHP解決方案嗎？也許CSS？ JavaScript的？（ps那些我知道我可以使用的語言）

請訪問Obvious.com（trans to Medium）以供參考。

2012-10-10 user1724095

你可以指定你指的是哪個特定元素https://developer.mozilla.org/en-US/docs/CSS/clip和https://developer.mozilla.org/en-US/docs/CSS/text-overflow？代碼示例會很好。 –

它只是一個CSS DIV具有一定寬度

<div style="width:300px; height:400px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor justo quis urna hendrerit placerat. Ut fringilla rutrum nulla at rutrum. Nullam sagittis accumsan erat et venenatis. Maecenas luctus magna rutrum neque aliquet dictum at quis libero. Mauris at felis dolor. Nam sit amet euismod purus. Etiam tincidunt laoreet dui ut fermentum.</div>

這裏有一個的jsfiddle我做http://jsfiddle.net/RZFYH/

來源

2012-10-10 16:11:17

不行，你忘記了溢出。添加更多文本並查看會發生什麼。你必須設置overflow：隱藏，正如我上面所說的那樣，否則內容會溢出div。 –

如果你看看源代碼，你會看到更多的文本比實際顯示傳遞到瀏覽器。他們正在做的是返回文章的前x個字符（在由PHP生成的輸出HTML中），然後用CSS剪裁容器元素。 x值需要經過反覆試驗才能預先確定，但沒有什麼特別的。

請參閱有關CSS文本細節剪裁

來源

2012-10-10 16:12:08 Xophmeister

他們只是使元素的大小和設置溢出：隱藏。除了由他們正在使用的任何CMS創建的片段之外的x個字符無關。然而，這並不是控制多少個字符適合該盒子的東西。 http://jsfiddle.net/calder12/RZFYH/1/ –

是的，對不起：這不是真正的剪裁，它是溢出，如你所說（見https://developer.mozilla.org/en-US/docs/CSS/overflow ）。關於x字符：當然你可以返回文檔中的所有字符，但返回第一個x的目的是爲了避免返回太多的數據，因爲在某個數字之後它不會被看到，這是浪費的帶寬。這不是直接相關的，而是相關的。 – Xophmeister

是的，贊同和好點。 –

如何動態地使文本適合區域正方形

回答

相關問題