CODEWITHSUNDEEP
htmlcss
user8296390
user8296390

Reputation: 23

How to break a long string and make it continue on the next line?

Assuming the extreme case where I get a long string that has no white space and I want to break it into the next line, how can I do that? Currently it moves the whole string to the second line and then breaks on the third. How can I make it so the string starts right after the username, breaks at the end of that line and then continues for the next 2? 

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  overflow-y: scroll;
  word-break: break-word;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
}

.username {
  font-weight: bold;
}
<div id="chat">
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
</div>

Upvotes: 0

Views: 4121

Answers (5)

James Douglas
James Douglas

Reputation: 3446

You need to change the CSS of #chat. You need to replace

word-break: break-word;

With

word-break: break-all;

The reason this works, is that break-word as a value of word-break doesn't exist. You're confusing it with overflow-wrap, which does have a value of break-word.

Values of overflow-wrap:

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

And the values of word-break:

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  word-break: break-all;
  overflow-y: scroll;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
}

.username {
  font-weight: bold;
}
<div id="chat">
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhspanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  </span>
  <span><p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  </span>
</div>

Upvotes: 0

domsson
domsson

Reputation: 4681

First, you are wrapping each .message (those are p) in a span. However, span is an inline-element and can only contain other inline-elements, but p is a block-level element. I therefore suggest to remove the additional span.

Second, use word-break: break-all on .message instead of word-break: break-word (which is an invalid value) on #chat, that should do the trick:

#chat {
  height: 300px;
  width: 95%;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
  text-align: left;
  padding: 5px;
  font-size: 13px;
  display: inline-block;
  overflow-y: scroll;
}

.message {
  border-bottom: 0.5px solid #CACACA;
  line-height: 150%;
  word-break: break-all;
}

.username {
  font-weight: bold;
}
<div id="chat">
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>spanasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdhasjdqwljdawjdh</p>
  <p class="message"><span class="timestamp">[15/06/2017 6:15] </span><span class="username">Username: </span>asjdqwljdawjdh</p>
</div>

Upvotes: 1

Abhay Dixit
Abhay Dixit

Reputation: 1018

You can use this css for your chat: 

#chat {  
  height: 300px;  
  width: 100%;  
  border: 1px solid #d9d9d9;  
  background-color: #f8f8f8;  
  text-align: left;  
  padding: 5px;  
  font-size: 13px;  
  display: inline-block;  
  overflow-y: scroll;  
  word-break: break-all;  
}

Hope this helps.

Upvotes: 0

Tree
Tree

Reputation: 264

One way to do it is with textarea

textarea {
  width: 200px;
}
<textarea>dfhiasfausdhfuasdfasdufasfuadsfasudfads</textarea>

Upvotes: 1

Gerard
Gerard

Reputation: 15796

Use something like:

p.test {
  word-break: break-all;
}

Upvotes: 4

Related Questions