Если вы действительно хотите ''. join ()
, вы можете использовать std :: copy
с std :: ostream_iterator
до std :: stringstream
.
#include & lt; algorithm & gt; // для std :: copy #include & lt; iterator & gt; // для std :: ostream_iterator std :: vector & lt; int & gt; значения(); // инициализируем этот std :: stringstream buffer; std :: copy (values.begin (), values.end (), std :: ostream_iterator & lt; int & gt; (buffer));
Вставьте все значения в буфер
. Вы также можете указать пользовательский разделитель для std :: ostream_iterator
, но это будет добавлено в конце (это существенное отличие от join
). Если вам не нужен разделитель, это сделает именно то, что вы хотите.
По-видимому, добавление:
td {
display: block; /* or inline-block */
}
также решает проблему.
Еще одно возможное решение - установить table-layout: fixed;
для таблицы, а также установить ее width
. Например: http://jsfiddle.net/fd3Zx/5/
Если вы не хотите устанавливать max-width в td (например, в этот ответ ), вы можете установить max-width в div:
function so_hack(){}
function so_hack(){}
http://jsfiddle.net/fd3Zx/754/ function so_hack(){}
function so_hack(){}
Примечание: 100% не работает, но 99% делает трюк в FF. Другим современным браузерам не нужны глупые div-хаки.
td { border: 1px solid black; padding-left:5px; padding-right:5px; } td>div{ max-width: 99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
Вместо того, чтобы использовать многоточие для решения проблемы переполнения текста, я обнаружил, что введенный и стилизованный ввод выглядел лучше и все еще позволяет пользователю просматривать и выбирать всю строку, если это необходимо.
<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />
Это похоже на текстовое поле, но с подсветкой, поэтому он более удобен для пользователя
Просто предлагая альтернативу, поскольку у меня была эта проблема, и ни один из других ответов здесь не имел желаемого эффекта, который я хотел. Поэтому вместо этого я использовал список. Теперь семантически информация, которую я выводил, можно было бы рассматривать как как табличные данные, так и перечисленные данные.
Итак, в конце концов я сделал это:
<ul>
<li class="group">
<span class="title">...</span>
<span class="description">...</span>
<span class="mp3-player">...</span>
<span class="download">...</span>
<span class="shortlist">...</span>
</li>
<!-- looped <li> -->
</ul>
Таким образом, в основном ul
table
, li
- tr
, а span
- td
.
Затем в CSS я устанавливаю элементы span
как display:block;
и float:left;
( Я предпочитаю эту комбинацию с inline-block
, поскольку она будет работать в более старых версиях IE, чтобы очистить эффект float, см.: http://css-tricks.com/snippets/css/clear-fix/ ) и также иметь эллипсы:
span {
display: block;
float: left;
width: 100%;
// truncate when long
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Затем все, что вы делаете, задает max-widths
ваших интервалов, и это даст списку вид таблицы.
Проверьте свойство box-sizing
css ваших элементов td
. У меня возникла проблема с шаблоном css, который устанавливает значение border-box
. Вам нужно установить box-sizing: content-box
.
Как было сказано ранее, вы можете использовать td { display: block; }
, но это побеждает цель использования таблицы.
Вы можете использовать table { table-layout: fixed; }
, но, возможно, вы хотите, чтобы он вел себя по-разному для некоторых колонок.
Итак, лучший способ добиться того, что вы хотите, - это обернуть текст в <div>
и применить свой CSS к <div>
(а не к <td>
) следующим образом:
td {
border: 1px solid black;
}
td > div {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Также важно поместить
table-layout:fixed;
в таблицу, поэтому она хорошо работает в IE9 (если вы используете max-width).
Для таблиц с динамической шириной я нашел способ ниже для получения удовлетворительных результатов. Каждый <th>
, который хочет иметь возможность обрезанного текста, должен иметь внутренний элемент обертывания, который обертывает содержимое <th>
, чтобы разрешить text-overflow
работать.
Тогда реальным трюком является установка max-width
(на <th>
) в единицах vw
.
Это эффективно приведет к тому, что ширина элемента будет «привязана» к ширине окна просмотра (окно браузера) и приведет к отсечению пользовательского контента. Установите единицы vw
на требуемое значение.
th{ max-width:10vw; }
th > .wrap{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
table {
font: 18px Arial;
width: 40%;
margin: 1em auto;
color: #333;
border: 1px solid rgba(153, 153, 153, 0.4);
}
table td, table th {
text-align: left;
padding: 1.2em 20px;
white-space: nowrap;
border-left: 1px solid rgba(153, 153, 153, 0.4);
}
table td:first-child, table th:first-child {
border-left: 0;
}
table th {
border-bottom: 1px solid rgba(153, 153, 153, 0.4);
font-weight: 400;
text-transform: uppercase;
max-width: 10vw;
}
table th > .wrap {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<table>
<thead>
<tr>
<th>
<div class="wrap" title="Some long title">Some long title</div>
</th>
<th>
<div class="wrap">Short</div>
</th>
<th>
<div class="wrap">medium one</div>
</th>
<th>
<div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>-</td>
<td>-</td>
<td>-</td>
<td>very long text here</td>
</tr>
</tbody>
</table>
display: table-cell
(по умолчанию для элементовtd
) не принимают ширину. – Michael Mior 29 April 2012 в 14:29display: block;
отчасти поражает цель использования таблицы. Мне нравится опцияtable-layout: fixed;
, она работает хорошо для меня. – Alex Kinnee 14 December 2013 в 01:18table-layout:fixed
распределяет ширину столбцов менее умным способом. Есть ли еще один параметр, который будет назначать ширину столбца таким же образомtable-layout: normal
, и все же отображать эллипсис правильно? – nest 14 January 2015 в 09:34* {display: block}
в мои таблицы стилей ... – Jrop 6 October 2017 в 21:09