Эллипсис посреди текста (стиль Mac)
Вам просто нужно добавить компонент renderField в ваше радио-поле:
Почему это решает вашу проблему? То, что вы используете здесь, является полевым компонентом формы Redux. (См. Ваш импорт import { Field, reduxForm } from "redux-form";). Когда вы не знаете, как работает интегрируемый компонент, всегда есть надежда на хорошую документацию. В случае с избыточной формой нам повезло: на самом деле есть такая, которая также описывает их компонент поля.
То, что мы можем получить, это следующее:
blockquote>
Требуется имя реквизита. Это строковый путь в точечно-скобочной форме, соответствующий значению в значениях формы. Это может быть так же просто, как 'firstName' или так же сложно, как contact.billing.address [2] .phones [1] .areaCode.
Требуется компонент реквизит. Это может быть Компонент, функция без сохранения состояния или фабрика, как это предусмотрено в React.DOM. Смотрите раздел Использование ниже. Чтобы узнать о реквизитах, которые будут предоставлены какому-либо компоненту, см. Раздел «Реквизиты» ниже.
Все остальные реквизиты будут передаваться элементу, сгенерированному компонентом prop.
Во втором абзаце объясняется, почему ваш подход не сработал: требуется компонент проп. :)
Источник: https://redux-form.com/6.0.0-alpha.6/docs/api/field.md/
Надеюсь помогает.
4 ответа
В HTML поместите полное значение в настраиваемый атрибут data- *, например
<span data-original="your string here"></span>
. Затем назначьте прослушиватели событий load и resize для Функция JavaScript, которая считывает исходный атрибут данных и помещает его в innerHTML вашего тега span. Вот пример функции многоточия:
function start_and_end(str) {
if (str.length > 35) {
return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
}
return str;
}
Отрегулируйте значения или, если возможно, сделайте их динамическими, если необходимо для разных объектов. Если у вас есть пользователи из разных браузеров, вы можете украсть ссылочную ширину из текста, используя тот же шрифт и размер в другом месте вашего dom. Затем выполните интерполяцию до необходимого количества символов для использования.
Совет также должен иметь тег abbr в сообщении ... или who, чтобы пользователь мог получить всплывающую подсказку с полной строкой.
<abbr title="simple tool tip">something</abbr>
Вот изящное решение:
function truncateMiddle(word) {
const tooLongChars = 15; // arbitrary
if (word.length < tooLongChars) {
return word;
}
const ellipsis = '...';
const charsOnEitherSide = Math.floor(tooLongChars / 2) - ellipsis.length;
return word.slice(0, charsOnEitherSide) + ellipsis + word.slice(-charsOnEitherSide);
}
Вы не можете сделать это с помощью CSS. Проблема в том, что HTML и CSS должны работать в различных браузерах и шрифтах, и практически невозможно рассчитать ширину строки согласованным способом. Это идея , которая может вам помочь. Однако вам нужно будет сделать это несколько раз, пока вы не найдете строку подходящей ширины.
Следующая функция Javascript выполняет усечение по середине, как OS X:
function smartTrim(string, maxLength) {
if (!string) return string;
if (maxLength < 1) return string;
if (string.length <= maxLength) return string;
if (maxLength == 1) return string.substring(0,1) + '...';
var midpoint = Math.ceil(string.length / 2);
var toremove = string.length - maxLength;
var lstrip = Math.ceil(toremove/2);
var rstrip = toremove - lstrip;
return string.substring(0, midpoint-lstrip) + '...'
+ string.substring(midpoint+rstrip);
}
Она заменяет символы в середине многоточием. Мои модульные тесты показывают:
var s = '1234567890';
assertEquals(smartTrim(s, -1), '1234567890');
assertEquals(smartTrim(s, 0), '1234567890');
assertEquals(smartTrim(s, 1), '1...');
assertEquals(smartTrim(s, 2), '1...0');
assertEquals(smartTrim(s, 3), '1...90');
assertEquals(smartTrim(s, 4), '12...90');
assertEquals(smartTrim(s, 5), '12...890');
assertEquals(smartTrim(s, 6), '123...890');
assertEquals(smartTrim(s, 7), '123...7890');
assertEquals(smartTrim(s, 8), '1234...7890');
assertEquals(smartTrim(s, 9), '1234...67890');
assertEquals(smartTrim(s, 10), '1234567890');
assertEquals(smartTrim(s, 11), '1234567890');