0

Hi

I have problem with span tag padding paroblem can I do fix it with css or javascript


here is code which hard coded for left and right padding I have ad &nbsp; and <br />

I want programatic way to fix it with css or java script


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em">
<div style="width: 250px;">
<p>
<span style="background-color: #009; color: #FFF;" class="blocktext">&nbsp;This is what I want to&nbsp; <br />

&nbsp;happen where one&nbsp;<br />
&nbsp;long string is wrapped&nbsp; <br />
&nbsp;and the text has this&nbsp; <br />
&nbsp;highlight color behind&nbsp; <br />&nbsp;it.&nbsp; <br />
<br />

Notice the padding to the left and right above - which I can only make by adding nbsp and br tags at the end of the line. I have to do this manually (otherwise it looks like this).</span></p></div>
<div style="background-color: #009; color: #FFF; padding-right: 12px; padding-left: 12px; width: 226px;">
<p>I do not want a solid rectangle of color behind the whole paragraph like this. </p>
</div>
<p>&nbsp;</p>
</body>
</html>


also here is examle what I exactly need

http://www.asteraweb.co.uk/wrap_example.html


This is urgent plz suggest me better way


Thanx

3
Contributors
10
Replies
11
Views
7 Years
Discussion Span
Last Post by fxm
0

Can I do this with javascript besides of css

becouse with a span tag padding will be ad in fron and rear of paragraph

where browser or dive tag will breake line there padding will remove

0

I have found one solution of above problem.

Its working with Chrome Mozilla Firefox and Safari but not working with IE

code is here

<html>
<script type="text/javascript" language="javascript">
function set_padd(){
 var tt = document.getElementById("pp").innerHTML;
 var txt = new Array();
 txt = tt.split("<br>");  
 var atxt = '';
 for(var i = 1; i < txt.length;i++){
    if(txt[i].length > 0){
     atxt += '<a class="padd_txt" >'+txt[i]+'</a><br />';
    }
 }  
 document.getElementById("pp").innerHTML = atxt;
}
</script>
<style>

.padd_txt{padding:5px;background:#009;color:#FFF;line-height:26px;font-size:14px;}

</style>
<body onload="set_padd();"  style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em">
<div style="width: 250px;">
  <p>
  <span id="pp" style="background-color: #009; color: #FFF;" class="blocktext">This is what I want to <br />
    happen where one<br />
    long string is wrapped  <br />
    and the text has this <br />
    highlight color behind <br />it.

</span>
<div style="background-color: #009; color: #FFF; padding-right: 12px; padding-left: 12px; width: 226px;">
  <p>I do not want a solid rectangle of color behind the whole paragraph like this. </p>
</div>


</div> 
</body>
</html>

Edited by mike_2000_17: Fixed formatting

0

It is not working in Chrome or Firefox: the first line does not display.
Also, you are using a class which is not defined [blocktext].

0

I got the final Solution of this problem

this is solution

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wrapped</title>

      <script type="text/javascript" language="javascript">

      function set_padd(){

      var tt = document.getElementById("span_padding").innerHTML;

      var txt = new Array();





   if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=8)
  txt = tt.split("<BR>");
 else if (ieversion>=7)
  txt = tt.split("<BR>");
 else if (ieversion>=6)
  txt = tt.split("<BR>");
 else if (ieversion>=5)
  txt = tt.split("<BR>");
}
else
 txt = tt.split("<br>")


      var atxt = '';

      for(var i = 0; i < txt.length; i++){

      if(txt[i].length > 0){

      atxt += '<a class="padd_txt" >'+txt[i]+'</a><br />';

      }

      }

      document.getElementById("span_padding").innerHTML = atxt;

      }

      </script>

      <style type="text/css">



      .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;}



      </style>

      </head> 

      <body onload="set_padd();" style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em">

      <div style="width: 350px;">

      <p>

      <span id="span_padding" style="background-color: #009; color: #FFF;" class="blocktext">This is what I want to <br />

      happen where one<br />

      long string is wrapped <br />

      and the text has this <br />

      highlight color behind <br />it.



      </span>







      </div>

      </body>

      </html>

Edited by mike_2000_17: Fixed formatting

0

I got the final Solution of this problem

this is solution

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wrapped</title>

      <script type="text/javascript" language="javascript">

      function set_padd(){

      var tt = document.getElementById("span_padding").innerHTML;

      var txt = new Array();





   if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
 var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if (ieversion>=8)
  txt = tt.split("<BR>");
 else if (ieversion>=7)
  txt = tt.split("<BR>");
 else if (ieversion>=6)
  txt = tt.split("<BR>");
 else if (ieversion>=5)
  txt = tt.split("<BR>");
}
else
 txt = tt.split("<br>")


      var atxt = '';

      for(var i = 0; i < txt.length; i++){

      if(txt[i].length > 0){

      atxt += '<a class="padd_txt" >'+txt[i]+'</a><br />';

      }

      }

      document.getElementById("span_padding").innerHTML = atxt;

      }

      </script>

      <style type="text/css">



      .padd_txt{padding:7px;background:#009;color:#FFF;line-height:26px;font-size:14px;}



      </style>

      </head> 

      <body onload="set_padd();" style="font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; line-height:1.2em">

      <div style="width: 350px;">

      <p>

      <span id="span_padding" style="background-color: #009; color: #FFF;" class="blocktext">This is what I want to <br />

      happen where one<br />

      long string is wrapped <br />

      and the text has this <br />

      highlight color behind <br />it.



      </span>







      </div>

      </body>

      </html>

Edited by mike_2000_17: Fixed formatting

0

Is this a joke?
When the <br /> tags that you put there by hand are removed, the script does nothing.
BTW: the IE tests are pointless; all you had to do was make the split case-insensitive.

0

Is this a joke?
When the <br /> tags that you put there by hand are removed, the script does nothing.
BTW: the IE tests are pointless; all you had to do was make the split case-insensitive.

ok then what to do

If I will remove <br /> br tags from html then what will be the solution in javascript for line break

0

The basic problem is this: you think that innerHTML contains some indication of where plain text is currently wrapping on the screen. It doesn't.

Even when coded correctly, something as simple as what you have already done will work only when the string you fetch to display is not plain text; that is, when it already contains correctly positioned '<br />' tags [or equivalent].

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.