How To Auto Ellipse Text in C# [Beginner]


One thing we did notice, however, is that a lot of people seem to end up there when they are actually searching for how to auto ellipse text in C#. And while you could implement the algorithm discussed on the javascript tutorial in C#, it is by no means the easiest way to ellipse strings in C#.

What is the best way? There are actually two possibilities, and which you should use depends on your situation. The first is extremely simple - you put text in a label, and you set that label's AutoEllipsis property to true.
With AutoEllipsis set to
True With AutoEllipsis set to
False
Label myLabel = new Label();
myLabel.Location = new System.Drawing.Point(10, 10);
myLabel.Size = new System.Drawing.Size(100, 15);
myLabel.AutoEllipsis = true;
myLabel.Text = "Some Text That Will Be Ellipsed";
 
As you can see, the Label will by default always truncate your text. But with AutoEllipsis on, it will put ellipses on the end of the string if it is being truncated.

So that's pretty simple. But what if you aren't using labels - your drawing directly on the screen? Well, there is a built in solution in C# for that as well. It is a little known class called TextRenderer which has a bunch of the logic for string rendering built right in. The TextRenderer class is actually what a Label uses to draw its contents, and to do its AutoEllipsing.

Using the TextRenderer class is extremely simple. It is comprised of a number of static methods for drawing and measuring strings. To use it for ellipsing, we will be using the following method:
public static void DrawText(IDeviceContext dc, string text, Font font, 
    Rectangle bounds, Color foreColor, Color backColor, TextFormatFlags flags);
 
There are two arguments that may look unfamiliar to you: IDeviceContext dc and TextFormatFlags flags. The IDeviceContext in most cases will just be a Graphics object, which you will get from the arguments of an OnPaint method. The TextFormatFlags will be what we use to tell the TextRenderer to ellipse the string.

Here is a potential use of the method:
protected override void OnPaint(PaintEventArgs e)
{
  base.OnPaint(e);
  TextRenderer.DrawText(e.Graphics, "I am Some Text!", new Font("Arial", 11),
      new Rectangle(10, 75, 100, 50), Color.Black, Color.White, 
      TextFormatFlags.EndEllipsis);
}
 
Here, we are overriding the OnPaint of some control, and painting the text "I am Some Text!" at position (10,75) with a width/height of (100,50) using the font Arial with a size of 11pt. The text will be black, and the background will be white, and if the text exceeds 100px long (the width specified in the bounds) it will be ellipsed so that it fits within 100px. It is that TextFormatFlags.EndEllipsis that causes the ellipsing magic to happen. There are a number of other flags as well, and you can check out the MSDN docs if you want to learn more about them.

I've put together some code that shows the TextRenderer in action, and allows you to play around with how ellipsing works:
using System;
using System.Collections.Generic;

using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace EllipseApplication
{
  public class EllipseForm : Form
  {
    private TextBox sourceTextBox = new TextBox();
    private NumericUpDown widthBox = new NumericUpDown();
    private Label textboxLabel = new Label();
    private Label widthBoxLabel = new Label();
    private Font textFont = new Font("Arial", 11);

    public EllipseForm()
    {
      this.SuspendLayout();
      this.Text = "Ellipse Test";
      this.Size = new Size(300, 300);

      this.sourceTextBox.Location = new System.Drawing.Point(125, 12);
      this.sourceTextBox.Size = new System.Drawing.Size(155, 20);
      this.sourceTextBox.TextChanged += 
           delegate(object sender, EventArgs e) { this.Invalidate(); };
      this.Controls.Add(this.sourceTextBox);

      this.widthBox.Location = new System.Drawing.Point(125, 38);
      this.widthBox.Size = new System.Drawing.Size(55, 20);
      this.widthBox.Value = 50;
      this.widthBox.Maximum = 300;
      this.widthBox.ValueChanged += 
           delegate(object sender, EventArgs e) { this.Invalidate(); };
      this.Controls.Add(this.widthBox);

      this.textboxLabel.Location = new System.Drawing.Point(10, 12);
      this.textboxLabel.Size = new System.Drawing.Size(105, 20);
      this.textboxLabel.Text = "Text To Ellipse:";
      this.textboxLabel.TextAlign = System.Drawing.ContentAlignment.MiddleRight;
      this.Controls.Add(this.textboxLabel);

      this.widthBoxLabel.Location = new System.Drawing.Point(10, 38);
      this.widthBoxLabel.Size = new System.Drawing.Size(105, 20);
      this.widthBoxLabel.Text = "Width of Final String:";
      this.widthBoxLabel.TextAlign = System.Drawing.ContentAlignment.MiddleRight;
      this.Controls.Add(this.widthBoxLabel);
      this.ResumeLayout();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
      base.OnPaint(e);
      TextRenderer.DrawText(e.Graphics, this.sourceTextBox.Text, textFont, 
          new Rectangle(10, 75, (int)this.widthBox.Value, 50), 
          Color.Black, Color.White, TextFormatFlags.EndEllipsis);
    }

    [STAThread]
    static void Main()
    {
      Application.EnableVisualStyles();
      Application.SetCompatibleTextRenderingDefault(false);
      Application.Run(new EllipseForm());
    }
  }
}
 
And here is a screen shot of it in action:
TextRenderer In
Action

Pretty much all it allows you to do is change the text being drawn, and change the width of the bounding box the string is being drawn in. As you can see in the overridden OnPaint method for this form, it is getting the text to draw from the text box, and the width of the bounding box from the NumericUpDown control. You should be able to copy this into Visual Studio and play around with it - in fact, I would suggest doing so. Some of the other TextFormatFlags can produce interesting results.

Hope this satisfies all those people who are searching for string ellipsing in C#!

Comments