#javascript #html #css
Вопрос:
У меня в приложении есть таблица, которая выглядит так:
var td = $('#text'); td.append("lt;div msg style='color:red'gt;" "apply ellipsis so it doesn't stretch the td" "lt;/divgt;"); lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Documentlt;/titlegt; lt;script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"gt;lt;/scriptgt; lt;stylegt; table, th, td { border: 1px solid black; } div[msg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: blue; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;table style="width:20%"gt; lt;theadgt; lt;trgt; lt;th style="width:10%"gt;Monthlt;/thgt; lt;th style="width:10%"gt;Savingslt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td style="width:10%" id="text"gt; January lt;/tdgt; lt;td style="width:10%"gt; Lorem ipsum dolor. lt;/tdgt; lt;/trgt; lt;/tablegt; lt;/bodygt; lt;/htmlgt; Как видно, я добавляю div в один из моих тд.
Я бы надеялся, что смогу добавить текстовое переполнение:многоточие в div, чтобы оно не растягивало td.
И хотел бы, чтобы добавленный текст был только шириной TD, а не растягивал его.
Я следил за некоторой документацией в Интернете и добавил соответствующие настройки css, но безрезультатно.
Есть идеи, почему это не работает..Спасибо.
Ответ №1:
var td = $('#text'); td.append("lt;div style='width:100px'gt;lt;div msg style='color:red'gt;" "apply ellipsis so it doesn't stretch the td" "lt;/divgt;lt;/divgt;"); lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;titlegt;Documentlt;/titlegt; lt;script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"gt;lt;/scriptgt; lt;stylegt; table, th, td { border: 1px solid black; } div[msg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: blue; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;table style="width:20%"gt; lt;theadgt; lt;trgt; lt;th style="width:10%"gt;Monthlt;/thgt; lt;th style="width:10%"gt;Savingslt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td style="width:10%" id="text"gt; January lt;/tdgt; lt;td style="width:10%"gt; Lorem ipsum dolor. lt;/tdgt; lt;/trgt; lt;/tablegt; lt;/bodygt; lt;/htmlgt; Добавьте контейнер в свой div определенной ширины.
Комментарии:
1. Но то, что я не хочу жестко указывать ширину, я бы хотел, чтобы она знала, что ширина равна ширине td (в данном случае 10%).
Ответ №2:
Вы можете использовать это свойство CSS (в элементе таблицы) для принудительного увеличения ширины, чтобы они не увеличивались: table-layout: fixed .
Добавьте переполнение:скрыто, чтобы скрыть расширяющееся содержимое. Но гораздо лучше для UX было бы использовать полосу прокрутки или разрешить переполнение в новой строке.
table { table-layout:fixed; } table, th, td { border: 1px solid black; } td { white-space: nowrap; overflow:scroll; /* overflow:hidden */ } lt;bodygt; lt;table style="width:400px"gt; lt;theadgt; lt;trgt; lt;th style="width:20%;"gt;Monthlt;/thgt; lt;thgt;Savingslt;/thgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;td id="text"gt; January Lorem ipsum dolor. lt;/tdgt; lt;tdgt; Lorem ipsum dolor. lt;/tdgt; lt;/trgt; lt;/tablegt; lt;/bodygt; lt;/htmlgt;