Html Question posted in
Some basic documentation can be found here.

Html – How to break a word and keep it on the same line with CSS?

Let’s say I have the following paragraph tag:

<p>10 andSomeQuiteLongWord</p>

If I use word-break: break-word or overflow-wrap: anywhere, the word breaks as expected but also gets to a new line, like this:

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|10               |
|andSomeQuiteLongW|
|ord              |
|_________________|

I would like to display it as such:

|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|
|10 andSomeQuiteLo|
|ngWord           |
|_________________|

Is there a way to achieve this?

Tags:

2

Answers


  1. 0

    word-break using break-all should do it:

    div {
  width: 100px;
  background: red;
  word-break: break-all;
}
    <div>
  10 andSomeQuiteLongWord
</div>
    Login or Signup to reply.
  2. 0 
    word-break: normal;
overflow-wrap: break-word;

    The word-break CSS property is used to specify whether lines within words should be broken.

    https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

    The overflow-wrap property is used to specify whether the browser can break lines within words to prevent overflow when an unbreakable sequence of characters is too long to fit in its containing box.

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search