Word wrap break word for one word only?

Question

I want to use word-wrap: break-word for just one word inside an element. If I use it for the whole element then it looks messy. I did a search but could not find if and how to do it, is it possible?

I had something like the below in mind, but that didnt work obviously.

<a href="http://www.gnruoegvnuergvneginvjn9ege494jqj049ijirtg9g994w90409gngioeiegioi34ioiginioe5inigo5jgo5iojgio5iowgiowjmvmq.com" target="_blank" style="word-wrap: break-word;">http://www.gnruoegvnuergvneginvjn9ege494jqj049ijirtg9g994w90409gngioeiegioi34ioiginioe5inigo5jgo5iojgio5iowgiowjmvmq.com</a>

Well, you just encapsulate that word with `` tags and apply style to it. — odedta, Jun 11 '15 at 12:27
@Pardeep Dhingra - Basically that the URL stays within the width of my responsive container and does not go overboard. — , Jun 11 '15 at 12:27

score 1 · Answer 1 · answered Jun 11 '15 at 12:45

Please check this code. I hope this is what you are asking for ( just to wrap a single word )

.a {
  width: 200px;
  background-color: yellow;
}

<div class="a">
  <a href="http://www.gnruoegvnuergvneginvjn9ege494jqj049ijirtg9g994w90409gngioeiegioi34ioiginioe5inigo5jgo5iojgio5iowgiowjmvmq.com" target="_blank" style="word-wrap: break-word;">http://www.gnruoegvnuergvneginvjn9ege494jqj049ijirtg9g994w90409gngioeiegioi34ioiginioe5inigo5jgo5iojgio5iowgiowjmvmq.com</a>
  <br>
  <br>
  <br>
  <p>Hi my naame is
    <a href="#" style="word-wrap:break-word"> HelloWOrldHelloWOrldHelloWOrldHelloWOrld </a>
  </p>
</div>

JSFIDDLE link

score 0 · Answer 2 · answered Jun 11 '15 at 12:27

0

I don't think break-word is legal. Have you tried break-all?

http://www.w3schools.com/cssref/css3_pr_word-break.asp

answered Jun 11 '15 at 12:27

fix

1,425
16
27

Word wrap break word for one word only?

2 Answers2