473,320 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Why am I getting a line break when using a <span>?

Good morning!

I am having a problem with a span. I have items, of which I only want
to show the first X characters on the screen. If the user prints the
page, I want the entire item to print.

Thanks to Els, I have a way to do this, see below, directly from the
View Source:

This is a long piece of text. This is a long piece of text. This
is<span class="moreText">...(more)</span><span class="longText"> a
long piece of text. This is a long piece of text.</span>

The class "moreText" is shown only on the screen and just indicates
that there is more text available and is hyperlinked to a screen with
the entire text. The class "longText" is only shown on the printed
report. This is working fine. What is incorrect is that the text is
showing on the printed report with a line break at the location of the
<span>:

This is a long piece of text. This is a long piece of text. This
is***CRLF here***
a long piece of text. This is a long piece of text.

As I understood <span> tags, they are inline tags, as opposed to <div>
tags, which are block tags. Inline tags specifically are not supposed
to cause line breaks, right?

Any ideas, suggestions, war stories, or good clean jokes would be
greatly appreciated.

Kathryn
Jul 20 '05 #1
5 29344
bu*******@citifinancial.com (Kathryn) wrote in
news:ff**************************@posting.google.c om:
This is a long piece of text. This is a long piece of text. This
is<span class="moreText">...(more)</span><span class="longText"> a
long piece of text. This is a long piece of text.</span>

The class "moreText" is shown only on the screen and just indicates
that there is more text available and is hyperlinked to a screen with
the entire text. The class "longText" is only shown on the printed
report. This is working fine. What is incorrect is that the text is
showing on the printed report with a line break at the location of the
<span>:

This is a long piece of text. This is a long piece of text. This
is***CRLF here***
a long piece of text. This is a long piece of text.


It would really help if you could give us a URL.

Make sure you're using display:none rather than visibility:hidden to keep
"moreText" off the printed report; if you mistakenly used the latter, the
text would be layed out as if it was still there occupying space even
though it wouldn't actually display.
Jul 20 '05 #2
bu*******@citifinancial.com (Kathryn) wrote:
I am having a problem with a span. I have items, of which I only want
to show the first X characters on the screen. If the user prints the
page, I want the entire item to print.
And what happens in speech browsers, or when CSS is off?
This is a long piece of text. This is a long piece of text. This
is<span class="moreText">...(more)</span><span class="longText"> a
long piece of text. This is a long piece of text.</span>
We need the URL. The URL will give access to the exact markup _and_ to
the style sheet, and lots of other information.
What is incorrect is that the text is
showing on the printed report with a line break at the location of the
<span>:
This is probably caused by something in the style sheet.
As I understood <span> tags, they are inline tags, as opposed to <div>
tags, which are block tags. Inline tags specifically are not supposed
to cause line breaks, right?
Correct. But this can be changed by changing the value of the display
property in CSS, explicitly or implicitly.
Any ideas, suggestions, war stories, or good clean jokes would be
greatly appreciated.


I'm not sure why you want to be the onscreen version abridged, but in
general I would create two versions of the document itself and perhaps
label them as "screen" and "print" versions and link them to each other.
I think it would be rather restrictive if the user cannot access the full
version except by printing the document (or doing a print preview).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #3
Thanks for all of your replies. I should have provided more detail.
I apologize in advance for the length of this posting.

This app is for an internal intranet, so I can't show it to you. The
app's purpose is to allow our collections centers to communicate with
our branches, to request informatin. The text on the page is abridged
so that more lines of dialogue between our collection centers and our
branches can be seen. Each abridged dialog line ends with "(more...)"
which is linked to the full text. In addition, each entire request's
dialogue is accessible, with the entire text of each dialogue line
shown.

Here is the stylesheet, cssMediaTest.css, for my test page:
*******BEGIN STYLESHEET*********
@media print {
.longText {
display : block;
}
.moreText {
display : none;
}
}

@media screen {
.longText {
display : none;
}
.moreText {
display : block;
}
}
*******END STYLESHEET*********

Here is the code of the test page, with some ColdFusion tags:

*******BEGIN CODE PAGE *********
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Page</title>
<LINK REL="StyleSheet" type="text/css" HREF="cssMediaTest.css">
</head>

<body>
<cfset text = "This is a long piece of text. This is a long piece of
text. This is a long piece of text. This is a long piece of text.
This is a long piece of text. This is a long piece of text. This is
a long piece of text. This is a long piece of text. This is a long
piece of text. This is a long piece of text. This is a long piece of
text. ">
<cfset beginText = Left(text,50)>
<cfset endText = Mid(text,51,999)>

<cfoutput>
This is the text shown on the page:
#beginText#<cfif compareNoCase(endText,"")><span
class="moreText">...(more)</span><span
class="longText">#endText#</span></cfif>

</cfoutput>
</body>
</html>
*******END CODE PAGE*********
When I run this page and View Source in the browser, I get:
*******BEGIN VIEW SOURCE*********
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test Page</title>
<LINK REL="StyleSheet" type="text/css" HREF="cssMediaTest.css">
</head>

<body>

This is the text shown on the page:
This is a long piece of text. This is a long piec<span
class="moreText">...(more)</span><span class="longText">e of text.
This is a long piece of text. This is a long piece of text. This is
a long piece of text. This is a long piece of text. This is a long
piece of text. This is a long piece of text. This is a long piece of
text. This is a long piece of text. This is a long piece of text.
</span>
</body>
</html>
*******BEGIN VIEW SOURCE*********

The above View Source looks correct to me. However, when the test
page is run in IE 6, or when I print it I get line break after 'This
is a long piec', right where the first span begins. This is what I
need to fix.

Sorry to be so lengthy; I have probably erred on the side of verbosity
this time. Any ideas, references, resources, or good clean jokes
would be greatly appreciated.

Kathryn

And what happens in speech browsers, or when CSS is off?
This is a long piece of text. This is a long piece of text. This
is<span class="moreText">...(more)</span><span class="longText"> a
long piece of text. This is a long piece of text.</span>


We need the URL. The URL will give access to the exact markup _and_ to
the style sheet, and lots of other information.
What is incorrect is that the text is
showing on the printed report with a line break at the location of the
<span>:


This is probably caused by something in the style sheet.
As I understood <span> tags, they are inline tags, as opposed to <div>
tags, which are block tags. Inline tags specifically are not supposed
to cause line breaks, right?


Correct. But this can be changed by changing the value of the display
property in CSS, explicitly or implicitly.
Any ideas, suggestions, war stories, or good clean jokes would be
greatly appreciated.


I'm not sure why you want to be the onscreen version abridged, but in
general I would create two versions of the document itself and perhaps
label them as "screen" and "print" versions and link them to each other.
I think it would be rather restrictive if the user cannot access the full
version except by printing the document (or doing a print preview).

Jul 20 '05 #4
bu*******@citifinancial.com (Kathryn) wrote:
@media print {
.longText {
display : block;
}
.moreText {
display : none;
}
}

@media screen {
.longText {
display : none;
}
.moreText {
display : block;
}
} This is a long piece of text. This is a long piec<span
class="moreText">...(more)</span><span class="longText">e of text.
This is a long piece of text. This is a long piece of text. This is
a long piece of text. This is a long piece of text. This is a long
piece of text. This is a long piece of text. This is a long piece of
text. This is a long piece of text. This is a long piece of text.
</span>
The above View Source looks correct to me. However, when the test
page is run in IE 6, or when I print it I get line break after 'This
is a long piec', right where the first span begins. This is what I
need to fix.


display : block; means display the element like a block, with line
breaks before and after. If you want to keep the inline nature of span
use display: inline; instead.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #5
Steve,

Thanks for the solution (although I do feel like an idiot for not
seeing that myself).

Have a good weekend.

Kathryn

Steve Pugh <st***@pugh.net> wrote in message news:<ck********************************@4ax.com>. ..
display : block; means display the element like a block, with line
breaks before and after. If you want to keep the inline nature of span
use display: inline; instead.

Steve

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Alexander Ross | last post by:
I have an html snippet, and I want to remove any <span> tags that have a specific attribute (class=none) ex. The quick brown <span class="animal">fox</span> jumped <span...
13
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to...
4
by: DMJ | last post by:
What is the difference between these two tags?
18
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
19
by: Werner Partner | last post by:
I have such a construction: <span id="xyz">Hello world</span> <span id="xyz">Hello Nordrhein-Westfalen</span> Validator critizises (oh!) that there is twice the same span. the problem is...
2
by: Andrei Pociu | last post by:
Is there some way to make the label not add a <span> tag? For example I don't need any styles applied or position set so I could as well get rid of <span>. Or is there some other type of control...
1
by: Fao, Sean | last post by:
I'm trying to set the title attribute on a CheckBox and I'm having some issues in ASP.NET 1.1. The title attribute in the following example is valid in HTML 4.01 Transitional: <input...
5
by: Brent | last post by:
Take this small HTML fragment: span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;} ------------------------ <div> <span id="1" class="theClass">&nbsp;<span> <span id="2"...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.