CODEWITHSUNDEEP
htmlcss
Daft
Daft

Reputation: 10964

Force word wrap through CSS

At the moment TEST TEST appear side by side. How can I push one down onto a second line? Only through CSS.

<div id="box"><p>TEST TEST</p></div>

#box{
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

Upvotes: 32

Views: 67552

Answers (7)

PH.
PH.

Reputation: 596

I use this css style:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
<div style="width: 500px;" class="dont-break-out">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

Upvotes: 14

Vennsoh
Vennsoh

Reputation: 4991

I will do something like this.

<h4>lorem ipsum 
  <span class="wrap-text">
    dolor site amet
  </span>
</h4>

.wrap-text{
     white-space: pre-line;
}

Not sure why one of the above suggestion uses pre-wrap. I think pre-line will be a better one. It will ignore all spaces and tabs but honour hard returns in source code.

So in your code, for places you want to wrap to the second line, do a hard return.

I like putting a span class is because with this you can make it responsive, only trigger the wrapping at certain viewport sizes. eg: @media (max-width:768px)

Upvotes: 5

Amit
Amit

Reputation: 2565

<html><head>
<style>
#box {    
    width:5px;
    display:table;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style></head>
<body>
<div id="box">TEST TEST</div>
</body>
</html>

Upvotes: 39

Itay
Itay

Reputation: 16777

Assuming you're trying to make the element always show one word in a line, you can use the CSS word-spacing property.

jsFiddle Demo

#box {
    word-spacing: 30000px; 
}
  • P.S - You can set this property to a very large value (32767px on Chrome 29.0.1 and infinite values on FF23) and it'll work the same way. That way it won't be coupled with the container's width.

Upvotes: 27

Mordalthunder
Mordalthunder

Reputation: 256

Setting the width of a element automatically breaks text inside the element

There is also an option to break a word, this can be done with

word-wrap: break-word;

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Upvotes: 9

Kami
Kami

Reputation: 19407

You need to set the width of the div element. The elements will then roll over to the new line automatically.

#box{
    width:20px; /* or a suitable width*/
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    background-color: red;
    color: white;
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

Note, however, that the height becomes dependent on the content. If there is allot of content then the element height will also increase.

And alernative approach is to set the word spacing for the parent container to a high amount, eg,

.parent {
  word-spacing:; 
}

That will also force word wrap after each word.

Upvotes: 0

Steini
Steini

Reputation: 2783

Simple, simply put TEST<'br />TEST only through css it is not possible unless you have two subcontainers, one for each "TEST".

Upvotes: -5

Related Questions