text not expanding the div

Question

In my card, the text is not expanding vertically the div. I tried to use the clear property, but doesn't helped. Any ideas?

here is my actual code: http://jsfiddle.net/kuupsdm5/1

Card

score 3 · Answer 1 · answered Aug 28 '14 at 14:12

3

It because you have .card-body as a single word just add this property word-wrap: break-word; and remove width:100%.

DEMO

answered Aug 28 '14 at 14:12

Benjamin

2,612
2
20
32

2

Width 100% is also causing mis-alignment FYI – Dan Aug 28 '14 at 14:13
Agree that its because he is having some padding for his text. – Benjamin Aug 28 '14 at 14:15

Dan · Accepted Answer · 2014-08-29T14:11:45.513

3

Change your .card-body class:

.card-body {
  padding: 15px;
  border-left: 1px solid rgba(0,0,0,0.2);
  border-right: 1px solid rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  word-wrap: break-word;
}

You have a very long word there and if you don't include the word-wrap:break-word; it will stay on a single line. Width 100% along with the padding was also causing the line to extend beyond the others, so either remove the padding or width 100% from the class.

JS Fiddle Demo

edited Aug 29 '14 at 14:11

answered Aug 28 '14 at 14:12

Dan

9,391
5
41
73

Hey if we keep `width:auto;` , is there any problem? – Ravi Mehta Aug 28 '14 at 14:31
It shouldn't cause any problems, but it's not necessary to include. – Dan Aug 28 '14 at 14:35

score 2 · Answer 3 · edited May 23 '17 at 12:30

2

Try this ... into the Body Style

word-wrap: break-word;

May be Duplicate of

CSS 2.1: Wrap Text Inside Div

UPDATE

JSFiddle Demo

edited May 23 '17 at 12:30

Community

1
1

answered Aug 28 '14 at 14:13

Ravi Mehta

454
1
8
20

Width 100% is also causing mis-alignment FYI – Dan Aug 28 '14 at 14:14
That did the trick, but I tried before without eht width: 100% – Luiz E. Aug 28 '14 at 14:15

text not expanding the div

3 Answers3

JS Fiddle Demo