Wrap text for container of undefined width

Question

In my fiddle here, I would like to split the text into 2 lines. The splitting needs to be like in the image below:

The splitting needs to be according to the width of the image.

I tried playing with word-break but it seems that it needs width of the container to be defined.

Is there a way to fix this using CSS only?

jsFiddle

You have to fix width in px or in %. – user3074446 Sep 24 '14 at 10:09 — user3074446, Sep 24 '14 at 10:09

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

You can use the display: table-caption property to make an item fit the width its container already had without stretching it, and reset the white-space to make sure the lines actually break when it gets too wide:

span.item a{
    text-decoration: none;
    color: grey;
    text-align: center;
    display: table-caption;
    white-space: normal;
}

Then add a vertical-align: top to your span.item to make them line up nicely.

Fiddle: http://jsfiddle.net/n4c24cg7/4/

Answer inspired by this answer.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 24 '14 at 10:27

Stephan Muller

27,018
16
85
126

Is there a way I can wrap it in 2 lines only and the overflowing text can be denoted by `...` ? – Rahul Desai Sep 24 '14 at 10:34
Not with just CSS. `text-overflow:ellipsis` works only for one line – Stephan Muller Sep 24 '14 at 11:12
`display: table-caption`? Dear god, where has this been all my life. – George Mauer Dec 29 '14 at 15:43

score 0 · Answer 2 · answered Sep 24 '14 at 11:12

) this should do the trick:

div.items div{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.container {
  white-space:nowrap;
}
.item {
    width: 1%;
    display: inline-table;
    padding:0px 15px;
}
a {
    height: auto;
    overflow: hidden;
    text-decoration:none;
    white-space:normal;
}

http://jsfiddle.net/n4c24cg7/6/

the padding is only cosmetic, by the way, can be adjusted at will. it might also be worth looking into the 'ellipsis'property to stick to the layout: Setting a fixed HEIGHT on the boxes will chop off the text in this scenario... Depending on what browsers you are counting on and the size of the text/caption coming after the images -- right now they align with the highest ;) hope this helps

as an after note... the real breaker on being able to scroll this horizontally is to keep the whitespace-nowrap contained in the outer elements, while letting your text break whenever it should — BMay, Sep 24 '14 at 11:16

DracSkywalker · Answer 3 · 2014-09-24T11:26:24.093

-3

You can find solution from here

  <div class="img">
     <img src="image/path/img" alt="">
    <div class="desc">Add a description of the image here blah blah blah</div>
    </div>

css

   div
   {
     width:100%;/*or specify width*/   
   }
   div.img {
    width:100%;
    }
    div.desc {
      margin: 5px;
      padding:5px;
      word-wrap:break-word;
    }

demo

edited Sep 24 '14 at 11:26

answered Sep 24 '14 at 10:24

DracSkywalker

363
4
13

Wrap text for container of undefined width

3 Answers3