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.

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




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


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

Yes, it is possible - see this:


.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>
Thursday, June 3, 2021
answered 7 Months ago

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 })
Monday, August 2, 2021
answered 5 Months ago

Is this what you're after?

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

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

$(window).resize(function() {
Tuesday, August 31, 2021
answered 4 Months ago

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
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 :