#html #css #antd
#HTML #css #antd
Вопрос:
я пытаюсь добавить значок информации к каждому выходу в компоненте дерева antd. Однако, если заголовок «оставить» слишком длинный, это приводит к появлению значка информации с суффиксом вне родительского контейнера. Эта проблема изображена на рисунке ниже. Также здесь приведена ссылка на фрагмент кода, демонстрирующий проблему. https://codesandbox.io/s/directory-antd4102-forked-46tqe?file=/index.css
Спасибо
Комментарии:
1. Вы хотите, чтобы значок с суффиксом переносился в следующую строку, если заголовок «оставить» слишком длинный? Или вы ожидаете, что зеленый прямоугольник станет шире и сохранит заголовок «Оставить» и значок с суффиксом в одной длинной строке?
2. я хочу, чтобы текст был усечен тройными точками, чтобы ширина листа увеличивалась шире, чем ширина родительского контейнера. Как вы можете видеть выше, когда текст слишком длинный, текст позже обрезается.
Ответ №1:
Если вы хотите сохранить явную 300px ширину родительского контейнера .wrapper . Тогда вы могли бы просто присвоить .ant-tree-title элементам (оставить заголовки) max-width свойство around 200px , чтобы они не могли увеличиваться больше, чем оставшееся пространство .wrapper . Значение 200px оставляет немного места для значков с суффиксами, которые выровнены по правой стороне каждого листа.
Таким образом, каждый заголовок и значок с суффиксом будут содержать многоточие (…) для длинных заголовков, сохраняя заголовок и значок с суффиксом внутри поля .wrapper содержимого.
.ant-tree-node-content-wrapper-normal .ant-tree-title {
display: inline-flex !important;
justify-content: flex-start !important;
text-align: left !important;
min-width: 0;
max-width: 200px; /* Restrict leave titles so they don't overflow */
border: 1px solid gray;
}
/* right align the suffixed icons */
.icon {
border: 1px solid blue;
position: absolute;
right: 0;
}
