diff --git a/src/core/services/lang.ts b/src/core/services/lang.ts
index e9b1dc3d5..ee079ce0e 100644
--- a/src/core/services/lang.ts
+++ b/src/core/services/lang.ts
@@ -380,7 +380,7 @@ export class CoreLangProvider {
 
         const list: string[] = strings.split(/(?:\r\n|\r|\n)/);
         list.forEach((entry: string) => {
-            const values: string[] = entry.split('|');
+            const values: string[] = entry.split('|').map(value => value.trim());
 
             if (values.length < 3) {
                 // Not enough data, ignore the entry.
diff --git a/src/tests/behat/customlangstrings.feature b/src/tests/behat/customlangstrings.feature
new file mode 100644
index 000000000..a21e7830f
--- /dev/null
+++ b/src/tests/behat/customlangstrings.feature
@@ -0,0 +1,19 @@
+@app @javascript
+Feature: Custom lang strings
+
+  Background:
+    Given the following "users" exist:
+      | username |
+      | student1 |
+
+  Scenario: Customlangstrings without whitespaces
+    Given the following config values are set as admin:
+      | customlangstrings | core.courses.mycourses\|Foo\|en | tool_mobile |
+    When I entered the app as "student1"
+    Then I should be able to press "Foo" in the app
+
+  Scenario: Customlangstrings with whitespaces
+    Given the following config values are set as admin:
+      | customlangstrings | core.courses.mycourses\| Foo with whitespaces \|en | tool_mobile |
+    When I entered the app as "student1"
+    Then I should be able to press "Foo with whitespaces" in the app