From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 28 Apr 2019 15:47:51 +0000 (+0200)
Subject: Add truncated example of custom file browser
X-Git-Tag: v5.0.0-alpha1~1134
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f36890d1cd47ba1706a1d81fc7d2a5468e5dc3f3;p=thirdparty%2Fbootstrap.git

Add truncated example of custom file browser
---

diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md
index e48f5bc12d..4214f1660c 100644
--- a/site/content/docs/4.3/components/forms.md
+++ b/site/content/docs/4.3/components/forms.md
@@ -1303,4 +1303,17 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
 </div>
 {{< /example >}}
 
+
+Longer placeholder text is truncated and an ellipsis is added when there's not enough space.
+
+{{< example >}}
+<div class="custom-file">
+  <input type="file" class="custom-file-input" id="customFileLong">
+  <label class="custom-file-label" for="customFileLong">
+    <span class="custom-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span>
+    <span class="custom-file-button">Browse</span>
+  </label>
+</div>
+{{< /example >}}
+
 We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.