Как уменьшить ширину длинных данных в HTML CSS, не затрагивая данные с меньшей длиной?

Question

Я показываю некоторые данные пользователя, имя, номер мобильного телефона, адрес электронной почты и т. Д. В моем угловом мобильном приложении.

Эти данные получены из ответа .., я использую, чтобы пролистать, чтобы просмотреть информацию о каждом члене. Я

Я использую тег тега таблицы для отображения информации о каждом члене участника в ячейке таблицы (во всяком случае, таблица не будет видна на экране приложения). Теперь проблема, с которой я сталкиваюсь,

Я получаю несколько длинных адресов электронной почты из ответа (скажем, например, abcdefghijklmnopqrsrsrsr @ gmail.comabcdefghijklmnopqrsrsrsr @ gmail.com, т. Е. Более 23 символов). Поскольку он слишком длинный, он не помещается в один вид, вид; он пересекает экран и касается подробного вида другого участника.

Если я попробую перенос по словам: break-word только для электронной почты электронной почты., Он также разрывает все маленькие адреса электронной почты .. (например, arunprs @ gmail.comarunprs @ gmail.com). Теперь мне нужно сломать только длинные почтовые адреса., А не маленькие.

Маленький адрес электронной почты должен отображаться таким, какой он есть. Как мне это сделать? Пожалуйста, помогите мне друзья .., Большое спасибо заранее.

Answer 1

Я уже использовал в своем проекте, как это:

h4{
    display:inline-block;
    white-space: normal;
    align-items:center;
    min-width:200px;
}

ИЛИ вы можете использовать текстовую область. Если вы хотите использовать текстовую область как тип ввода, вы можете изменить ее внешний вид.

Answer 2

Вы можете использовать word-break: break-all; Свойство CSS. Это только сломает адреса электронной почты, которые длиннее по длине, и сохранит короткие электронные письма без изменений.

Answer 3

Я бы хотел написать функцию или аналогичную функцию для изменения размера шрифта пропорционально длине писем, или, в качестве альтернативы, возможно показать первые 5 букв письма и иметь кнопку, чтобы показать остальные (в крайнем случае).

Редактировать (после word-break идея):

О word-break: break-all; Я бы порекомендовал использовать jQuery (если еще нет!) Для определения «оптимального» числа длины (что-то вроде 23 символов, которое я себе представляю), так: if length > 23 then add css-property word-break: break-all;