Как я могу определить ширину абсолютно расположенного элемента, чтобы он мог расти за пределами родителяCSS

Разбираемся в CSS
Ответить
Anonymous
 Как я могу определить ширину абсолютно расположенного элемента, чтобы он мог расти за пределами родителя

Сообщение Anonymous »

Почему абсолютно позиционируемые элементы в React-родных по-прежнему по сравнению с родителем с их шириной? Если я использую текст со стилем Flairtext , как я написал в своем примере, текст внутри все равно будет завернуть, если он превысит высоту родителя, от которого он был абсолютно позиционирован. Как я могу сформировать Flairtext таким образом, что его максимальная ширина не будет ограничена родителем, от которого он был абсолютно позиционирован?

Код: Выделить всё

import React, { FC } from 'react';
import { Text } from 'react-native';
import { barItemFlairStyles } from './styles/bar-item-flair';

interface BarGraphItemFlairProps {
displayedValue: number;
maxDisplayedValue?: number;
}

export const BarItemFlair: FC = ({
displayedValue,
maxDisplayedValue
}) => {
const ownStyles = barItemFlairStyles();

const displayedClampedValue = displayedValue;

return {displayedClampedValue};
};
< /code>
его стиль, в другом файле: < /p>
import { StyleSheet, TextStyle } from 'react-native';

export const barItemFlairStyles = () =>
StyleSheet.create({
flairText: {
position: 'absolute',
top: -35,
textAlign: 'center',
backgroundColor: 'blue',
} as TextStyle,
});
< /code>
Я бы ожидал, что абсолютно позиционированный элемент сможет расти за пределами родителя, если влево и вправо не определены < /p>
Явно настраиваясь влево и справа, чтобы не определить, не работает. numoflines = {1} 
не работает, так как есть эллипсис, и текст все еще не виден за пределами родителя. Использование Flexshrink и подобных вещей не сработало. Настройка Flex до 1 не сработала.


Подробнее здесь: https://stackoverflow.com/questions/791 ... -it-may-gr
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»