CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Harugawa
Harugawa

Reputation: 539

Text is not line breaking, no matter what

Here is the jsfiddle fiddle

code:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
        <div class="col-xs-12">
            <div class="col-xs-5" style="padding-right:0px;">
                <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE@._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
            <div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
          
                <p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
                kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
            </div>
        </div>
    </div>

Upvotes: 0

Views: 75

Answers (2)

Kenneth Larsen
Kenneth Larsen

Reputation: 95

You can use some css to fix this: 

.wrap-text {
  word-wrap: break-word;
}

And then: 

<p class="wrap-text">asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
            kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>

jsfiddle

Upvotes: 3

Mihai T
Mihai T

Reputation: 17697

add word-break:break-word to its container see below snippet or fiddle > jsFiddle

.col-xs-7{
  word-break:break-word;
}
<div class="container-fluid">
        <div class="col-xs-12">
            <div class="col-xs-5" style="padding-right:0px;">
                <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE@._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
            <div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
          
                <p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
                kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
            </div>
        </div>
    </div>

but i suggest you don't use plain text. instead wrap all the text inside a tag, for example a <p> like so :

 <p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
               kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>

( also use break-word )

Upvotes: 1

Related Questions