0

左に浮かんでいる画像と、次の要件を持つ div があります: a) max-height が必要 b) オーバーフローが必要: hidden 。c) 通常の float と同様に、テキストは float された image を囲む必要があります。

ただし、 (C) に問題があります。テキストが折り返されていません。overflow:hidden が実際にテキストの折り返しを防止することを読みました。

これに対する解決策（できればcss）を知っている人はいますか？

ご覧のとおり、テキストは猫の画像を囲んでいません: http://jsfiddle.net/FWjG4/

<html>
   <style>
     #articleContainer {
     width: 500px;
     height: 800px;
     color: pink;
        }

    .photo {
     float: left;
     width: 150px;
     height: 150px;
         }

    .article {
       max-height: 300px;
       max-width: 200px;
       overflow: hidden;
        }

    </style>
    <body>
     <div id="articleContainer">
        <img class="photo" src="googleyosemite.jpg" />
        <div class="article" >blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah bla
         </div>

             </div>
      </body>

    </html>
4

4 に答える 4

0

css{ white-space: pre-line; を試してください。}

于 2013-10-03T13:38:00.997 に答える
0

JSフィドル

HTML

<body>
    <div id="articleContainer">
        <img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9gFNtL3J-Qz7phuIK4F98X3UcRqAhihW4bdF70Ka07MzF-3yfjQ" />
        <div class="article" >blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah




        </div>

    </div>
</body>

CSS

#articleContainer {
     width: 200px; /* width is reduced*/
     height: 800px;
     color: pink;
}

.photo {
    float: left;
    width: 150px;
    height: 150px;
}

.article {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
于 2013-10-03T07:32:16.277 に答える
0

CSS の更新はありません。画像を div 内に配置するだけです。

   <div id="articleContainer">

            <div class="article" ><img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9gFNtL3J-Qz7phuIK4F98X3UcRqAhihW4bdF70Ka07MzF-3yfjQ" />blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blahblah blah blahblah
            blah blah blah
            blah blah blah
            blah blah blah
            blah blah blah




            </div>

   </div>

デモ: http://jsfiddle.net/shekhardesigner/dKjwz/

于 2013-10-03T07:28:37.247 に答える