Asked  7 Months ago    Answers:  5   Viewed   30 times

I have a situation where there can be long words like 'hellowordsometext' or integer like '1234567891122' without any space in between. check this js please. http://jsfiddle.net/rzq5e/6/

how is it possible to break it in to next line after it reach the div width. what happens now is, it spans out out along with th div

<div>Solutionforentprise</div>

 Answers

63

What you need is word-wrap: break-word;, this property will force the non spaced string to break inside the div

Demo

div {
   width: 20px;
   word-wrap: break-word;
}
Tuesday, June 1, 2021
 
Lorav
answered 7 Months ago
34

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}
<div class='circle'>
  <div class='arc'></div>
</div>
Thursday, June 3, 2021
 
SubniC
answered 7 Months ago
92

That's because <pre> has a default style display: block, use in your css pre { display: inline}

as for your edit, you need to add margin: 0; to ALL the pre blocks, not just the ones you want to style:

pre {
    display: inline;
    margin: 0;
}

You should try to avoid styling with JS whenever possible, but if you really must:

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
    $("pre").css({ "margin" : 0, "padding" : 0 })
</script>
Monday, August 2, 2021
 
Camsoft
answered 5 Months ago
37

Is this what you're after? http://jsfiddle.net/kuN4T/

I used a tiny snippet of jQuery-powered JavaScript to handle the right column:

var $e = $('#rightBlockReal'),
    $o = $('#rightblockfake');

$(window).resize(function() {
    $e.width($o.width());
}).resize();
Tuesday, August 31, 2021
 
DiglettPotato
answered 4 Months ago
42

Insert &shy; soft-breaks in the long word. There are various PHP libraries that can do that for you, based on dictionaries.

Wednesday, November 3, 2021
 
axiomer
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share