CSS可變寬度的div

Question

上下文：（簡化的）

<div style="width:300px;" > 
    <img src="blabla..." /> 
    <div style="oveflow:hidden; etc..." > 
     description 
    </div> 
</div> 

問題：
有時描述可以很長，並得到切斷（意，請參見「溢出：隱藏;「）。所以我這樣做是爲了當用戶懸停描述時，一個css動畫將描述向左側推進一點，讓我們說「margin-left：-200px;」。通過這種方式，用戶可以在顯示自己的同時繼續閱讀說明（css animate）。
現在出現這個問題：描述可能會從很長到很長甚至很長。顯然推到-200px的左邊有時是不夠的，有時候太多了。

解決方案，我知道：
1）

Javascript/jQuery 

我的網站是完全非js和非常輕巧，我不想用js。我在網上發現了很多使用js的解決方案，我已經知道它們。請尊重這一點。我很想通過純CSS來解決它。

2）

<marquee>description</marquee> 

折舊。

想法：
我正在考慮使用PHP代碼「欺騙」它。例如，我會計算描述的長度，以便我可以設置一個「margin-left： - ??? px;」因此。現在，這聽起來比js更醜，迫使我在php文件中「硬編碼」它，繞過了方便的CSS樣式表，並導致一個沉重的PHP文件。無關緊要。
雖然很多其他的設計師從我能找到的關於GG的搜索中發現了這個問題，但我沒有在CSS3中發現任何關於它的事情。它超出了css語言的範圍嗎？
謝謝。

PS：我的描述必須適合於1行。不換行，沒有滾動條，沒有「顯示更多」按鈕等

Answer 1

最近我能來。

我稍微擔心，slide最終與隱藏說明結束，但我認爲這是一個很小的代價...否則我認爲它符合大多數的標準

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.wrap { 
 
    width: 300px; 
 
    margin: 1em auto; 
 
    border:1px solid green; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.wrap img { 
 
    max-height:100%; 
 
    width: auto; 
 
} 
 

 
.desc { 
 
    width: 300px; 
 
    height: 15px; 
 
    white-space:nowrap; 
 
    overflow: hidden; 
 
    font-size:13px; 
 
    line-height: 15px; 
 
    position: relative; 
 
} 
 
.wrap .desc p{ 
 
    position: absolute; 
 
    transform: translateX(0); 
 
    transition: transform 5s ease; 
 
} 
 

 
.wrap:hover .desc p{ 
 
    transform: translateX(-100%); 
 
}

<div class="wrap" > 
 
    <div class="image"> 
 
    <img src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg" alt="" /> 
 
    </div> 
 
    <div class="desc" > 
 
     <p>Tri-tip shank turkey chuck, porchetta drumstick andouille beef ribs prosciutto salami beef. Ham hock pork belly pig pastrami. </p> 
 
    </div> 
 
</div>

Codepen Demo

Answer 2

1. 當達到每次 一定的長度，你可以使用echo <br/>用PHP。
2. 你可以使用CSS max-width屬性寬度限制在 一定量

Answer 3

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap

p.test { 
word-wrap: break-word; 
} 

這是你在找什麼？

Answer 4

我會建議你修正描述div的寬度和高度，並使用css屬性overflow-y：auto。

默認的滾動條對於所有的瀏覽器來說都很難看，所以你可以嘗試一個js插件，但正如你所說的，你不想爲了實現一個小任務而添加一個庫。:)

Answer 5

嘗試這個 -

div.test { 
     white-space: nowrap; 
     width: 12em; 
     overflow: hidden; 
     height:30px; 
    } 
    div.test:hover { 
     text-overflow: inherit; 
     overflow: visible; 
    } 

    <p>Hover over the two divs below, to see the entire text.</p> 

    <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box. This is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the boxThis is some long text that will not fit in the box</div> 
    <br> 
    <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>