Using text-overflow: ellipsis at html doesn't work

[DanielZ]

Hello,

I'm using Spire.PDF to convert html pages to PDF and XPS. I'm new at html and also at Spire.PDF.

I have a table containing text of different length and I want to cut it when it reaches the end of table size. Therefore I use

.txt_td
{
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
max-width:83mm;
}

Now the result looks good at newest versions of Firefox and IE, but the converted PDF and XPS files didn't cut the text. Is that unsupported and is there an alternative?

Best regards
DanielZ

[amy.zhao]

Hi DanielZ,

Thanks for your posting and using our Spire.Pdf.
To help us look into your issue and work out solution, please share your html file or url.

Thank you.

Best Regards,
Amy
E-iceblue support team

[DanielZ]

Hello,

here is a short sample of my html page. We use it to print images with comments. For each image a comment can be added.

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
body
{
   width:275mm;
   height:195mm;
   max-width:275mm;
   max-height:195mm;
   margin: 5mm 5mm 0 15mm;
   font-family: sans-serif;
   font-size: 0.9em;
}
#header{
   width: 100%;
   height: 45mm;
}
.logo{
   width: 50%;
   max-height: 20mm;
}
.left{
   float: left;
}
.right{
   float: right;
}
.textContainerTop
{
   min-width: 16%;
    max-width: 50%;
    width: auto;
   margin: 1% 0.5% 0% 0.5%;
}
.textContainer
{
   width: 23%;
   margin: 0;
}
.textContainer2
{
   width: 55%;
   margin: 0;
}
.textContainer3
{
   width: 21%;
   margin: 0;
}
.textContainer txt
{
   width: 99%;
   margin: 0;
}
.textContainer p
{
   margin: 0;
}
table
{
   width: 100%;
   max-height: 150mm;
   margin: 0;
   padding: 0;
}
tbody
{
   margin: 0;
   padding: 0;
}
tr{
   margin: 0;
   padding: 0;
}
td {
   margin: 0;
   padding: 0;
}
.img_td
{
   width: 83mm;
   max-height: 40mm;
   vertical-align: top;
}

td.img_td img{
   width: auto;
   height: 40mm;
}

.txt_td
{
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
   max-width:83mm;
   height: 10mm;
   width: auto;
   font-size: 1.1em;
}
.placeholder_td
{
   width: 5mm;
}

.clear{
   clear: both;
   height: 3mm;
}

</style>
<title>Untitled 1</title>
</head>
   <body>
      <div id="header" class="left">
         <div class="clear"></div>
         <div class="left logo" >
            <img style="max-width: 100%; max-height: 20mm;" src="" alt="Logo" />
         </div>
         <div class="textContainerTop right">
            <p>
            Test A<br>
            Test B<br>
            Test C<br>
            Test D<br>
            Test E
            </p>
         </div>
         <div class="clear"></div>
      </div>
      <div class="clear"></div>
      
      <div>
         <table>
           <tr>
            <td class="img_td"><img name="img_0001" alt="Image 0001" srcImage1=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0002" alt="Image 0002" srcImage2=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0003" alt="Image 0003" srcImage3=""><br></td>
           </tr>
           <tr>
            <td class="txt_td">Image1: This is a comment which is much too long to be displayed under the image!</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image2: $CommentImage2</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image3: $CommentImage3</td>
           </tr>
           <tr>
            <td class="img_td"><img name="img_0004" alt="Image 0004" srcImage4=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0005" alt="Image 0005" srcImage5=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0006" alt="Image 0006" srcImage6=""><br></td>
           </tr>
           <tr>
            <td class="txt_td">Image4: $CommentImage4</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image5: $CommentImage5</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image6: $CommentImage6</td>
           </tr>
           <tr>
            <td class="img_td"><img name="img_0007" alt="Image 0007" srcImage7=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0008" alt="Image 0008" srcImage8=""><br></td>
            <td class="placeholder_td"></td>
            <td class="img_td"><img name="img_0009" alt="Image 0009" srcImage9=""><br></td>
           </tr>
           <tr>
            <td class="txt_td">Image7: $CommentImage7</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image8: $CommentImage8</td>
            <td class="placeholder_td"></td>
            <td class="txt_td">Image9: $CommentImage9</td>
           </tr>
         </table>
      </div>      
   </body>
</html>

As described in my first post the result looks good for Firefox and IE. The comment is cut at image size and ends with "...".
Using Spire.PDF the comment is not cut and the images 2,3 etc. are shiffted to the right and are located outside the DIN A4 paper size.

Best regards
DanielZ

[amy.zhao]

Hi,

Thanks for your providng.
I tested your html with latest version. Sorry that at present the feature is not supported.
The got result using PdfDocument.LoadFromHTML() functionality depends on IE9. I opened your html in IE9 and the result didn't cut the text.

Best Regards,
Amy
E-iceblue support team

[DanielZ]

Thanks for your fast answer, I will look for an other solution.

Best regards
DanielZ

[amy.zhao]

Hi DanielZ,

Sorry that we cannot resolve your issue. Welcome to write to us again if you have further problems.

Best Regards,
Amy
E-iceblue support team