Word break row in Bootstrap column

Asked

Viewed 291 times

-1

I’m trying to do a line break in a span or any other tag.

The idea is that if the user enters only one word and occupies more space than the column, this word breaks to the next line.

Below an example of what is happening using span, if I have a very large word does not break the line and goes over the column: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemplo</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
    
</head>
<body>
  <div class="container">
      <div class="col-4">           <span>TesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTe steTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTeste</span>
      </div>

  </div>
</body>
</html>

Does anyone know any solution?

css twitter-bootstrap

1 answer

0


So Julio, in this case we can use the property and value: word-wrap: break-word;, together in your class that span will use.

This property will break line in your text.

For example:

CSS
 span {
  word-wrap: break-word
 }

HTML 
<div class="col-4">           
     <span>TesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTe steTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTesteTeste</span>
</div>

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.