包裹下一個元素

之前將溢出隱藏我有與一組的div的佈局在不同的字體各含有三個字段顯示爲：包裹下一個元素

Author 
Title Date

這種結構是這樣的：

<div> 
    <div class="author">author</div> 
    <div> 
    <span class="title">title</span> 
    <span class="date">date</span> 
    </div> 
</div>

的塊是固定的寬度，但字段是可變的寬度。我希望作者和書名所以我申請被切斷時，他們是太長：

.author, .title { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

此作品爲作者，但標題被切斷，只有當日期已經移到下一行。我希望標題在日期碰到這樣的右側後立即刪除：

+---------------------------------+ 
| This is a very very long auto...| 
| This is a long ti... (yesterday)| 
+---------------------------------+

這是可能的與CSS？

編輯

一些澄清。我明白我可以如何在各種答案中給出標題的最大寬度，但那不是我所需要的。整個盒子有固定的寬度，所有的字段都有可變的寬度。

但是第二行需要在第一個字段（標題）而不是最後一個字段（日期）中斷。 因此，我希望標題的最大寬度取決於日期的寬度。例子：

+---------------------------------+ 
| This is a very very long auto...| 
| Short title (2 days ago)  | 
+---------------------------------+ 

+---------------------------------+ 
| Some author      | 
| Bit Longer tit.. (long time ago)| 
+---------------------------------+ 

+---------------------------------+ 
| Another author     | 
| This is a long ti... (yesterday)| 
+---------------------------------+

我不明白這是怎麼可能的CSS，甚至當我把它限制在前沿的瀏覽器或當我開始與黑客醜陋的東西，像表的HTML。

然而，好像要顯示的數據給最終用戶一個乾淨的方法，所以我希望有人誰知道魔術......

來源

2010-01-28 Tomas

確實屬於doctype，除非你想要一個Javascript的答案，這當然是可行的。 –

你是什麼意思屬於doctype？ – Tomas

順便說一句我不介意如果解決方案需要JavaScript ... – Tomas

我使用一些Javascript（javascript）在FF中工作。我還沒有用橢圓工作 - 但有一點工作可行（使用背景圖像方法）。

將其粘貼到.html文件中以查看概念驗證 - 加載時調整瀏覽器卷繞器的大小以使其更窄，以便自動移動內容併爲您提供所需的包裝效果。

<html> 
<head> 
    <title>test</title> 
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'></script> 
    <style type='text/css'> 
    .author, .title { 
    overflow:hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    } 
    .title, .date { 
    float: left; 
    } 
    .date { 
    margin-left:10px; 
    } 

    .author { 
    background-color: red; 
    color: white; 
    } 
    .title { 
    background-color: blue; 
    color: white; 
    } 
    .date { 
    background-color: green; 
    color: white; 
    } 
    </style> 
    <script type='text/javascript'> 
    $.resizeHeader = function() { 
    var _title = $('#title'); 
    var _date = $('#date'); 
    var _container = $('#headingContainer'); 
    _title.css('width','auto'); 
    var _containerWidth = _container.width(); 
    var _titleWidth = _title.outerWidth(true); 
    var _dateWidth = _date.outerWidth(true); 
    if ((_dateWidth+_titleWidth)>_containerWidth) { 
    var _deltaWidth = (_dateWidth+_titleWidth)-_containerWidth; 
    var _newTitleWidth = _titleWidth-_deltaWidth; 
    _title.width(_newTitleWidth); 
    } 
    } 

    $(function() { 
    $(window).resize(function() { 
    $.resizeHeader(); 
    }).resize();; 
    }) 
    </script> 
</head> 

<div id='headingContainer'> 
    <div class="author">This is an author title</div> 
    <div> 
    <span class="title" id='title'>This is the title which is very long and prone to spill over and over and over and over and over</span> 
    <span class="date" id='date'>The Date</span> 
    </div> 
</div> 
</html>

來源

2010-02-03 13:38:21

不錯的工作！我猜css-only不是一個選項，所以它必須是Javascript。謝謝！ – Tomas

+1漂亮的答案，例子中有趣的文字:) – Mattis

「跨度」元素爲內聯，除非另有處理指定。在碰到容器div的邊之前，需要限制其寬度爲.title。

像下面的內容可能會奏效：

.title{display:block;max-width:60px;}

編輯

好了，多一點上場，這似乎完成你所追求的與您的標記（假設它命名爲「＃包裝「）

div#wrapper{width:160px;border:1px solid #ccc;overflow:auto} 
.author, .title { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.title{display:block;width:60%;float:left} 
.date{display:block;width:40%;float:right;}

來源

2010-01-28 14:38:19

這將工作，如果日期字段有一個固定的寬度。我不知道確切的最大寬度標題。 – Tomas

嘗試將標題和日期設置爲'display：block'並將寬度設置爲百分比。如果容器的寬度是固定的，那麼這可能是正常工作的。您可能必須使用百分比 –

剛剛編輯我的答案有一個更好的解決方案 –

你需要做的事情就像漂浮日期的權利。另外，請記住，Firefox不支持text-overflow: ellipsis;你必須使用像馬特·斯奈德的方法在http://mattsnider.com/css/css-string-truncation-with-ellipsis/ ...

如果你不能浮動的日期，你想要的是不可能的。你需要重新考慮你的設計。

來源

2010-01-28 22:46:39

如果我將日期向右移動，並且標題變大，它將被推到日期之下，而不管溢出和空白。我猜我是什麼想要是不可能的。 – Tomas

這是我的解決方案，如果我正確理解你想要做什麼。即使你不知道標題的寬度，標題可能會溢出。既然如此，那麼你應該是決定溢出時間和位置的人。我沒有看到沒有設置最大寬度的方法。

.author, .title { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
.title { 
    max-width: 150px; 
    display:inline-block; 
} 
.date { 
    display:inline-block; 
    vertical-align:top; 
} 

<div> 
    <div class="author">author</div> 
    <div> 
    <span class="title">Really really really really long title</span> 
    <span class="date">Date</span> 
    </div> 
</div>

Browser Compatibility of max-width

來源

2010-01-31 04:01:36 user182666

您的解決方案將導致標題具有固定的最大寬度而不是整個框。 – Tomas

也許修復author元素的高度呢？

.author { 
    height: 1.2em; 
}

可能無法正常工作，CSS幾乎遵循HTML的基本流程佈局，它假設元素的高度將與他們的內容會有所不同。

來源

2010-02-01 11:35:03

這似乎並沒有解決它。我仍然需要指定一個「動態」最大寬度 – Tomas

哦，對不起，我誤解了這個問題。是的，CSS並沒有真正讓你根據其他元素的內容指定尺寸。 –

你需要做的是將< span class =「date」>元素絕對定位到容器< div>的右下角，並在其上設置背景圖像（包含省略號）並確保z索引設置在< span class =「title」>元素上方。然後，您只需讓.title元素在.date元素下運行，一切都應該很好。

div 
{ 
    width: 200px; 
    position: relative; 
} 
.author, .title 
{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display: block; 
} 
.date 
{ 
    background-color: #fff; 
    background-image: url(/images/ellipsis.gif); 
    background-position: left bottom; 
    background-repeat: no-repeat; 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
    z-index: 10; 
    padding-left: 10px; /* Assuming that the bg image is this size */ 
} 
.title 
{ 
    z-index: 0; 
}

它的工作對我來說在FF3.5，Chrome和IE8，但由於一直提到的文本溢出：省略號不能很好地工作跨瀏覽器。

來源

2010-02-02 01:02:32

您的解決方案適用於較長的標題和日期（示例2和3），但如果標題和日期較短（示例1），它仍顯示省略號並且日期仍然對齊。 – Tomas

但仍然，很好找！ – Tomas

是的，當然，哦，回到繪圖板... –

包裹下一個元素

回答

相關問題