Set Up Text Wrapping

• Sep 15, 2023
• 2 minutes to read

View Example: Different options for wrapping text

Run Demo: Text Ellipsis

1. Disable Text Wrapping

Disable text wrapping to display column cell text in one line. To achieve this, set a column’s CellStyle.Wrap property to False:

ASPX

<dx:GridViewDataColumn FieldName="C1" Width="100">  
    <CellStyle Wrap="False"></CellStyle>  
</dx:GridViewDataColumn>  

Result:

You can also set the white-space CSS property to nowrap to achieve the same result:

CSS

.disableWrapping {  
    white-space: nowrap;  
}  

ASPX

<dx:GridViewDataColumn FieldName="C2" Width="100">  
    <CellStyle CssClass="disableWrapping"></CellStyle>  
</dx:GridViewDataColumn>

Note

When text wrapping is disabled, the column’s Width property has no effect.

2. Enable Text Wrapping

Enable text wrapping if you require a fixed column width. To achieve this, explicitly specify the column’s Width property and set the CellStyle.Wrap property to True:

ASPX

<dx:GridViewDataColumn FieldName="C3" Width="100">  
    <CellStyle Wrap="True"></CellStyle>  
</dx:GridViewDataColumn> 

Result:

You can also set the white-space CSS property to normal to achieve the same result:

CSS

.enableWrapping {  
    white-space: normal;  
}  

ASPX

<dx:GridViewDataColumn FieldName="C4" Width="100">  
    <CellStyle CssClass="enableWrapping"></CellStyle>  
</dx:GridViewDataColumn>  

3. Wrap Text at Any Character

The technique described in the previous section only works if the cell text contains whitespaces. If you need to wrap text that does not contain whitespaces (for example, an email address), use the word-break CSS property:

CSS

.wrapEmail {  
    word-break: break-all;  
}  

ASPX

<dx:GridViewDataColumn FieldName="C5" Width="100">  
    <CellStyle CssClass="wrapEmail"></CellStyle>  
</dx:GridViewDataColumn>  

Result:

4. Truncate Cell Text

The Grid View control allows you to truncate text if it does not fit the cell. The following properties control the availability of this feature:

• At the control level - ASPxGridView.SettingsBehavior.AllowEllipsisInText

• At the column level - GridViewDataColumn.Settings.AllowEllipsisInText

Result: