How to hide Text on overflow in JavaFX? - javafx-8

Question

I am creating custom file chooser in JavaFX. Here is a button group for it:
And here is an fxml file content:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<GridPane hgap="5.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/8.0.131">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="200.0"
prefWidth="200.0"/>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="25.0"
prefWidth="25.0"/>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="25.0"
prefWidth="25.0"/>
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES"/>
</rowConstraints>
<children>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" prefHeight="25.0" prefWidth="200.0"
style="-fx-background-color: lightgrey;" GridPane.valignment="CENTER">
<GridPane.margin>
<Insets/>
</GridPane.margin>
<children>
<Text stroke="BLACK" strokeType="OUTSIDE" strokeWidth="0.0"
text="Chosen file name" StackPane.alignment="CENTER_LEFT">
<StackPane.margin>
<Insets left="5.0"/>
</StackPane.margin>
</Text>
</children>
</StackPane>
<StackPane maxHeight="-Infinity" minHeight="-Infinity" prefHeight="25.0"
style="-fx-background-color: lightgrey;" GridPane.columnIndex="1"
GridPane.halignment="CENTER" GridPane.valignment="CENTER">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="x"/>
</children>
</StackPane>
<StackPane maxHeight="-Infinity" minHeight="-Infinity" prefHeight="25.0"
style="-fx-background-color: lightgrey;" GridPane.columnIndex="2"
GridPane.halignment="CENTER" GridPane.valignment="CENTER">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="..."
StackPane.alignment="CENTER"/>
</children>
</StackPane>
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
</padding>
</GridPane>
When a user clicks on button (I am using Text as a button), it will show file chooser. After file chosen in should show file name. Everything works fine, but there is a problem when a file name is too long, the text is overflowing.
I want the text to be ended with "..." at the end instead of overflowing, and the size should not extend its parent size.
How to achieve this?

Answer 1

Use a Label instead. This automatically uses a ellipsis if the text gets too long for the available area. In contrast to Text it extends Region and therefore can be resized by the parent layout:
<?import javafx.scene.control.Label?>
...
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" prefHeight="25.0" prefWidth="200.0"
style="-fx-background-color: lightgrey;" GridPane.valignment="CENTER">
<GridPane.margin>
<Insets/>
</GridPane.margin>
<children>
<Label textFill="BLACK" text="Chosen file name" StackPane.alignment="CENTER_LEFT"
ellipsisString="..." textOverrun="ELLIPSIS" wrapText="false">
<StackPane.margin>
<Insets left="5.0"/>
</StackPane.margin>
</Label>
</children>
</StackPane>
...