By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,637 Members | 1,945 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,637 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.