Переполнение текста не работает, а макет ломается из-за гибкости в bootstrap4
Я новичок в модальном режиме flexbox в bootstrap4. В соответствии с моим требованием мне нужно показать усеченный текст text-ellipsis во вложенном гибком диске. Но показать не удалось.
Найдите мой код ниже и предложите мне. https://jsfiddle.net/trzd3xu1/1/
Ответы 2
Пожалуйста, обратитесь по этой ссылке https://getbootstrap.com/docs/4.1/utilities/text/#text-wrapping-and-overflow. Многоточие может работать только с заданной шириной. Применение ширины к вашему коду тоже послужит цели. "https://jsfiddle.net/trzd3xu1/38/" Обновленная ссылка на скрипт
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<title>IVR</title>
<meta name = "description" content = "IVR">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src = "js/jquery-3.3.1.min.js"></script>
<script src = "js/bootstrap.min.js"></script>
</head>
<body>
<div class = "wrapper d-flex flex-column">
<header class = "d-flex justify-content-center">Header</header>
<main class = "d-flex flex-row">
<div class = "sideNav">
<ul>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
<li>side link1</li>
</ul>
</div>
<div class = "rightContent">
<div class = "inside d-flex flex-row align-items-stretch">
<div class = "column-1">leftMenu</div>
<div class = "column-2">
<div class = "text-truncate" style = "width:4rem;">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</div>
</div>
</div>
</div>
</main>
<footer class = "d-flex justify-content-center">Footer</footer>
</div>
</body>
</html>
Вы можете попробовать использовать "max-width". Обновлена рабочий пример "jsfiddle.net/trzd3xu1/44"
Что вы хотите здесь показать? Проблема все еще существует.
В идеальных сценариях max-width действительно помогает решить проблему многоточия. Но вы используете flex-grow: 1, поэтому лучшим решением, насколько мне известно, является только ширина.
Покажи результат, если сможешь. Это было бы мне большим подспорьем
Надеюсь, это поможет вам:
Вам следует добавить style = "width:4rem;"
Если это было вашим требованием, то это должно быть решением:
https://jsfiddle.net/besartm/kLtznj54/
Пожалуйста, проверьте комментарии @Charu Maheshwari. Работать надо без увеличения ширины
Это решение без ширины: я назвал класс с "флекс-ребенок" и в файле css для этого класса добавил overflow: hidden; text-overflow: ellipsis; . Вот код: https://jsfiddle.net/besartm/uj7s2ntb/
Вы только что удалили пробел. Вот почему текст был перенесен сюда. Это не то, что я ищу. Он должен быть в один ряд с многоточием без использования ширины.
Тогда без ширины нет пути или вы должны указать ширину для родительского элемента.
пожалуйста, проверьте это и прокомментируйте jsfiddle.net/hyvs3jz9/5. У этого макета нет ширины.
Ваши требования немного запутались
Фактически список предметов будет приходить по очереди в правом разделе. Я должен ограничиться одной строкой каждого элемента. При наведении курсора мыши мы отобразим полный контент в всплывающей подсказке / всплывающем окне. Надеюсь, это проясняет ваше замешательство
Можно ли обойтись без увеличения ширины?