Обрезать диапазон внутри td
Я использую классы Materialize для создания «заполнителя для фотографий» для пользователя, который содержит первую букву его имени.
У меня проблемы с длинными именами внутри тега <td>. Я не хочу, чтобы имя ломалось, когда оно слишком длинное. Из-за этого я попытался применить class = "truncate" к спаму, содержащему имя, но его не удалось обрезать.
Как я могу это решить?
main {
padding: 16px;
}
table {
table-layout: fixed;
}
td {
width: 33.33%;
}
.photo-placeholder {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
display: inline-block;
background-color: crimson;
color: white;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<main>
<table id = "table1" class = "white z-depth-1 centered">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label = "Col 1">
<span class = "photo-placeholder">P</span>
<span class = "truncate">Pedro Luis Arend Gonçalves</span>
</td>
<td data-label = "Col 2">Info 2</td>
<td data-label = "Col 3">Info 3</td>
</tr>
</tbody>
</table>
</main>Ожидаемый результат:
Теперь я добавил изображение того, как я хочу, чтобы результат был похож. Имя должно быть сбоку от «заполнителя фотографии» и при необходимости обрезаться внутри td.
Вы объявили display в truncate как block, что означает, что он переместится на следующую строку в паре с photo-placeholder, который объявлен с display: inline-block.
Я только что сделал две вещи и работал нормально. 1- добавить float слева к диапазону фото-заполнителя 2- добавить эти свойства к .truncate span margin-left: 25%; обивка верха: 4%;
Ответы 3
Убедитесь, что для элемента установлено правило стиля width или max-width. В противном случае, пока есть место для роста, он будет занимать это место. Добавление правила стиля max-width: 50px; помогло мне в вашем примере.
Похоже, что класс «truncate» устанавливает для элемента значение display:block, что помещает его в отдельную строку.
Одним из решений может быть установка его на display:inline-block и установка его ширины на оставшееся пространство в ячейке таблицы. Ниже я рассчитал подходящую ширину, используя calc(). Я также удалил пустое пространство между двумя элементами <span>, чтобы оно не увеличивало ширину.
main {
padding: 16px;
}
table {
table-layout: fixed;
}
td {
width: 33.33%;
}
.photo-placeholder {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
display: inline-block;
background-color: crimson;
color: white;
}
#table1 .truncate {
display: inline-block;
width: calc(100% - 40px);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<main>
<table id = "table1" class = "white z-depth-1 centered">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label = "Col 1">
<span class = "photo-placeholder">P
</span><span class = "truncate">Pedro Luis Arend Gonçalves</span>
</td>
<td data-label = "Col 2">Info 2</td>
<td data-label = "Col 3">Info 3</td>
</tr>
</tbody>
</table>
</main>Чтобы не вычислять ширину, вы можете просто float оставить заполнитель слева, вот так:
main {
padding: 16px;
}
table {
table-layout: fixed;
}
td {
width: 33.33%;
}
.photo-placeholder {
float: left;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
background-color: crimson;
color: white;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<main>
<table id = "table1" class = "white z-depth-1 centered">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label = "Col 1">
<span class = "photo-placeholder">P</span>
<span class = "truncate">Pedro Luis Arend Gonçalves</span>
</td>
<td data-label = "Col 2">Info 2</td>
<td data-label = "Col 3">Info 3</td>
</tr>
</tbody>
</table>
</main>Вот другой метод, использующий контейнер флексбокс. Мне нравится этот, потому что проще центрировать два элемента по вертикали с помощью align-items:center.
main {
padding: 16px;
}
table {
table-layout: fixed;
}
td {
width: 33.33%;
}
.photoContent {
display: flex;
align-items: center;
}
.photo-placeholder {
flex: 0 0 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
background-color: crimson;
color: white;
margin: 0 0.5em 0 0;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<main>
<table id = "table1" class = "white z-depth-1 centered">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label = "Col 1">
<div class = "photoContent">
<span class = "photo-placeholder">P</span>
<span class = "truncate">Pedro Luis Arend Gonçalves</span>
</div>
</td>
<td data-label = "Col 2">Info 2</td>
<td data-label = "Col 3">Info 3</td>
</tr>
</tbody>
</table>
</main>Оно работает! Но имя стало немного странным, не так ли? Я заметил, что если я разорву строку между тегами <span>, она сделает то же самое, что и display:block.
Вероятно, это из-за пробела между двумя элементами. Из-за способа вычисления ширины усеченного элемента общая ширина двух элементов плюс это пустое пространство превышает 100% ширины контейнера, а второй элемент переносится на следующую строку. Вот почему я удалил пробел между двумя элементами в своем первом примере.
Скрипка Попробуйте добавить следующий CSS:
.photo-placeholder {
margin: 10px;
min-width: 40px;
}
table.centered tbody tr td:first-child {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
Текст кажется усеченным, когда он длиннее своего контейнера
<td>. Вы хотите, чтобы это работало по-другому? Можете ли вы помочь уточнить желаемую функциональность и/или проблему?