Can't make table cell truncate overflow text

[Phlawm53]

------
For Flare 10, PDF Target.

Despite having tried several variations on a theme, I can't figure out what CSS "trick" to use to get my print output's rightside headers to truncate when they're long.

The attached screenshot shows the header of a PDF output page. In the Page Layout, the header frame contains a two-columns table 7.5in wide with each column's width equal to 3.25in. The right side of the header (pink background) contains a Heading1 variable. IF the Heading1 is long, it widens the table cell.

PrintHeadingKeepsExpanding.png

I've tried a variety of things to instead force the table cell to remain fixed in size at 3.25in and truncate the text, all based on the same essential bits of CSS as follows:

Code: Select all

    {
    background-color: pink; /* Added to make it easy to see that the CSS is being applied */
    max-width: 3.25in; /* I've also tried width */
    overflow: hidden;
    white-space: nowrap;
    }

I've tried:

• Creating a span and applying it to the text
• Creating a class and applying it to the table cell
• Packaging the text in a DIV
• Several other permutations and variations on a theme

I've also spend a fair amount of time on StackOverflow.com. Lots of reputed answers, none of which have worked.

Anyone have the CSS solution to this problem?

Thanks for your help,
Riley
SFO

[SteveS]

The overflow property must be applied to a block element.

Instead of applying it to a cell have you tried applying it t a paragraph or an entire table?

[Phlawm53]

The overflow property must be applied to a block element.

Instead of applying it to a cell have you tried applying it t a paragraph or an entire table?

Funny you would ask. Yes, or so I believe. See the following screenshot:

ExamplesOfUnHiddenParaDivSpan.png

Here's the CSS for the P, DIV, and SPAN elements shown in that screenshot:

Code: Select all

	div.truncateDiv
	{
		border: solid 1px orange;
		text-overflow: ellipsis;
		width: 1in;
		max-width: 1in;
		white-space: nowrap;
		overflow: hidden;
		clip: 0in 2in 0in 0in;
	}

	span.truncateSpan
	{
		border: solid 1px magenta;
		display: inline-block;
		text-overflow: ellipsis;
		width: 1in;
		max-width: 1in;
		white-space: nowrap;
		overflow: hidden;
	}
	
	p.truncatePara
	{
		border: solid 1px blue;
		text-overflow: ellipsis;
		width: 1in;
		max-width: 1in;
		white-space: nowrap;
		overflow: hidden;
	}

I have a feeling I'm about to look like an idiot, but my understanding of CSS is that the width or max-width attributes ought to be controlling the width of all these elements. Yet NONE of them end up being 1in; wide. (I have also tried just width or max-width by themselves. Same effect so I've left 'em in these examples..)

I also did try applying the same attributes to a named table, that table's right column, and the TD element, as well as a P class within the table. The essential problem remains the same (which is why I moved my experiments out of a table and into the topic file shown in the preceding screenshot). I can't figure out how to constrain the width of elements so that hidden and nowrap can "take hold"(?)

I thought I was doing pretty well with CSS but I'm obviously vapor-locking on this one...

Cheers & thanks,
Riley
SFO

[Phlawm53]

By the by, here's the Flare XML Editor's view of the topic used to produce the PDF preview shown in my preceding comment:

ExamplesOfUnHiddenParaDivSpan02.png

Cheers,
Riley
SFO

[SteveS]

I had success with the following code:

Code: Select all

Div.overflow
{
width: 100px;
height: 50px;
overflow: hidden;
}

I couldn't, however, get any joy with the text-overflow property...

You have to view the masterpage (or whatever you are modifying) in the preview window, in the text editor the container you have applied the div to expands to show all content.

[Phlawm53]

I had success with the following code:

Code: Select all

Div.overflow
{
width: 100px;
height: 50 px; /* Need to correct space between 50 and px to make this valid CSS */
overflow: hidden;
}

I couldn't, however, get any joy with the text-overflow property…

What that did do (after I removed the space between 50 and px) was constrain the horizontal space. So far, so good.

But as you observed or hinted at, the companion CSS attributes such as white-space: nowrap; and overflow: hidden; don't seem to work. In fact, adding them into the list of attributes negated the operation of the width: attribute.

Interesting -- seems like a major deficiency to me…

Cheers, thanks, & have a super weekend,
Riley
SFO

[SteveS]

...What that did do (after I removed the space between 50 and px) ...

Sorry about that, I've edited the original post. That's what happens when you have Flare running on a different PC to the one connected to the 'net (and forum), can't cut and paste something that works

I'd be suggesting you submit a bug report, we both can get the overflow working but the options don't work as they should.

[Phlawm53]

...What that did do (after I removed the space between 50 and px) ...

I'd be suggesting you submit a bug report, we both can get the overflow working but the options don't work as they should.

Well, well, well — it appears, based on my experiments, that Flare 10 does not properly handle white-space: nowrap;, overflow: hidden;, and for that matter text-overflow: ellipsis;. And perhaps doesn't always handle display: inline-block; as it should.

I did all manner of incremental experimentation with those CSS attributes within Flare 10. The essential point is that display: inline-block;, white-space: nowrap; and overflow: hidden; all worked to disable the effect of an accompanying width attribute. Along the way, validating this annoyed me mightily in the process since the behaviors were so illogical relative to my otherwise reasonable grasp of how CSS worked…

Having thus made myself cranky, I next moved my experimental topic file and the project's CSS into a separate folder and added a reference to the copy of the CSS file to the XHTML in the topic file. In other words, I moved my little CSS laboratory outside of Flare.

I was immediately able to apply and control all of the aforementioned attributes. That is to say that the very same CSS constructions I was unable to make work in Flare 10 worked immediately and perfectly using a text editor and a browser.

I welcome any rebuttals to my conclusion in this regard. But as for me, it seems to be bug report time.

------
By the by, a couple of months ago I proved to my own satisfaction that Flare's PDF engine doesn't properly handle inline-block elements. I ended up creating a conditional-text circumvention for that particular issue. That in turn inspired me to create an enhancement request for a Definitive List of CSS elements and attributes that Flare recognizes in a particular Target. This most recent adventure seems to reinforce that need…

Cheers, thanks, and hope this information helps,
Riley
SFO

[SteveS]

...Having thus made myself cranky, I next moved my experimental topic file and the project's CSS into a separate folder and added a reference to the copy of the CSS file to the XHTML in the topic file. In other words, I moved my little CSS laboratory outside of Flare.

I was immediately able to apply and control all of the aforementioned attributes. That is to say that the very same CSS constructions I was unable to make work in Flare 10 worked immediately and perfectly using a text editor and a browser...

Yep. When I did my testing I worked with notepad++ and a browser. Saving the HTML on the desktop makes for a development environment that is quicker to use than Flare. Once the HTML is working I can reproduce the code in Flare, moving the style declarations to the stylesheet.

[SteveS]

A bit more experimentation...

The missing property in the css is:

Code: Select all

white-space: nowrap;

Once you add this you should get what you are looking for

[Phlawm53]

A bit more experimentation...

The missing property in the css is:

Code: Select all

white-space: nowrap;

Once you add this you should get what you are looking for :D

Yeah — per my comment in the accompanying LinkedIn thread, I have gotten the following working in HTML5 outputs for P / DIV / SPAN elements (tested in Firefox and IE 11):

p.truncatePara

Code: Select all

{
  width: 1in;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

For SPAN, I added display: inline-block; and vertical-align: text-bottom;.

Not sure what I did differently this time — this is essentially the same CSS I copied into my outside-of-Flare experiment comprising XHTML and CSS.

NOTE, however, that these attributes are COMPLETELY ineffective in PDF outputs. That's annoying because I began this exercise because I wanted to truncate overly long LEVEL1 variable building blocks in PDF page headers.

Cheers, thanks, and hope this info helps someone,
Riley
SFO

[SteveS]

Oh well, back to the middle suggestion of lodging a bug report. It might be a limitation of the PDF distiller...

[Phlawm53]

Oh well, back to the middle suggestion of lodging a bug report. It might be a limitation of the PDF distiller...

I this morning submitted an enhancement request for which I received a personal email reply in about one hour.

I responded to that message with the P / DIV / SPAN CSS required to produce the desired effect in an example HTML5 Target. That example will be used to guide the possible inclusion of that functionality in Flare's PDF engine.

Not sure if this new capability will make it into the next version, but I'm impressed that the E.R. was so quickly followed-up with a positive response. Imagine trying that with, say, the Scarlet A (as I like to call another tools vendor)…

Cheers, thanks, & hope this helps,
Riley
SFO