Reputation: 23
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
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
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
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
Reputation: 264
One way to do it is with textarea
textarea {
width: 200px;
}
<textarea>dfhiasfausdhfuasdfasdufasfuadsfasudfads</textarea>
Upvotes: 1