473,732 Members | 2,083 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 29589
bu*******@citif inancial.com (Kathryn) wrote in
news:ff******** *************** ***@posting.goo gle.com:
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:hidd en 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*******@citif inancial.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.cs s, 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="cssMediaT est.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#<cfi f compareNoCase(e ndText,"")><spa n
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="cssMediaT est.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*******@citif inancial.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="moreTex t">...(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
2575
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 class="none">over</span> the lazy dog should become The quick brown <span class="animal">fox</span> jumped over the lazy dog
13
3401
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 <foo/>) From XHTML specification:
4
2284
by: DMJ | last post by:
What is the difference between these two tags?
18
4393
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
9
6841
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 the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the span element. The default mouse action will only select the words when i move the mouse. Can...
19
2309
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 that the html-file is automatically created and I must be sure tat every element is cleanly framed by <span></span>
2
3669
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 that I could use instead of label that doesn't add a tag like span or div? Thank you.
1
3978
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 id="MyCheckBox" type="checkbox" title="ToolTip"> However, ASP.NET doesn't like it. No matter what I do, ASP.NET places my control inside of a span tag with the title attribute set in the
5
3540
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" class="theClass">Stuff in span<span> <span id="3" class="theClass"><span> </div> ------------------------
0
8944
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9445
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9306
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9234
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8186
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6030
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3259
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2721
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2177
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.