span tag padding problem, Javascript detecting line wrap

Question

sainiweb 0 Newbie Poster

14 Years Ago

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   and

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;">

 This is what I want to

happen where one  
 long string is wrapped  
 and the text has this  
 highlight color behind   it.

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

javascript

3 Contributors
10 Replies
256 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by fxm

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

You could add padding-left to a paragraph's :first-letter css class and a padding-left to the br tag.

fxm 23 Posting Pro

14 Years Ago

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].

fxm 23 Posting Pro

14 Years Ago

Is this a joke?
When the 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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sainiweb 0 Newbie Poster · Answer 1 · 2010-04-19T15:08:08+00:00

actully this paragraph will come from data base I want to remove   and tag from here

and want when broser break line here also be padding
like my example

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

sainiweb 0 Newbie Poster · Answer 2 · 2010-04-19T15:17:10+00:00

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

sainiweb 0 Newbie Poster · Answer 3 · 2010-04-20T18:41:38+00:00

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>

sainiweb 0 Newbie Poster · Answer 4 · 2010-04-20T23:47:51+00:00

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>

sainiweb 0 Newbie Poster · Answer 5 · 2010-04-21T00:08:14+00:00

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>

sainiweb 0 Newbie Poster · Answer 6 · 2010-04-21T03:21:26+00:00

Is this a joke?
When the 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 tags from html then what will be the solution in javascript for line break

fxm 23 Posting Pro · Answer 7 · 2010-04-21T03:52:50+00:00

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 ' ' tags [or equivalent].