CODEWITHSUNDEEP
htmlcss
WhatAName
WhatAName

Reputation: 53

Wrap the words to a new line

I have a problem to display the content of p inside a div . If my p is too long, i wish to break it down to a new line. But right now, it just keep stretching. How can I fix it to display as the block within a div? Thank you.

.box {
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  background: #fff;
}
.boxInner {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  overflow: hidden;
}
.boxInner img {
  width: 100%;
}

.boxInner .titleBox {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    color: #FFF;
    padding: 10px;
    text-align: center;
    height: 42%;
    position: absolute;
    display: block;
}


.titleBox1 {
    top: 0;
    left: 0;
    right: 0;
}
.titleBox2 {
    bottom: 0;
    left: 0;
    right: 0;
}
<div class="box">
      <div class="boxInner">
        <div class="titleBox titleBox1" >

          <p>
            asdasdasdasdddddddddasdddddddddddddddddddd
          </p>
        </div>
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
        <div class="titleBox titleBox2">An old greenhouse</div>
      </div>
    </div>>

Upvotes: 0

Views: 58

Answers (2)

yinyin
yinyin

Reputation: 36

add something to the css class

p{ word-wrap:break-word; width:100px; }

I think word-wrap can't work well without setting width in css.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201518

Your p element content is asdasdasdasdddddddddasdddddddddddddddddddd, which does not contain any permissible line breaking points. You need to define where and how it may be broken and then insert e.g. either zero-width spaces or soft hyphens. If you need help with this, you should post a description of your real content in the p element, illustrated with real examples, and specify the principles according to which it can be broken.

Upvotes: 2

Related Questions