Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Максимальная ширина строки в таблице (https://javascript.ru/forum/xhtml-html-css/22333-maksimalnaya-shirina-stroki-v-tablice.html)

debugx 15.10.2011 11:26

Максимальная ширина строки в таблице
 
Всем привет,
Есть таблица (<table style="width:100%;">) из нескольких колонок. В одной из колонок помещается текст, который может быть достаточно длинным. И сейчас из-за этого таблицу распирает за пределы родительского контейнера. Я задал свойства "overflow: hidden;white-space: nowrap;", чтобы текст обрезался. Но это не помогло, таблицу все-равно распирает
Каким образом это дело можно сверстать так, чтобы таблицу не распирало за пределы родительского контейнера?

Riim 15.10.2011 11:38

Цитата:

Сообщение от debugx
Я задал свойства "overflow: hidden;white-space: nowrap;"

каким элементам?

Возможно будет полезно погуглить по "&shy; wbr html" .

debugx 15.10.2011 12:02

Цитата:

Сообщение от Riim (Сообщение 131303)
каким элементам?

диву внутри <td></td>, в котором и лежит текст произвольной длины

Riim 15.10.2011 12:46

Цитата:

Сообщение от debugx
диву внутри <td></td>, в котором и лежит текст произвольной длины

наверное, не указана ширина. "overflow: hidden" работает по ширине, только когда она точно задана (или как-то родителем ограничена). С высотой то же самое. Можно еще с max-width что-нибудь попробовать.

Seva1986 15.10.2011 13:06

debugx,


Ту не так нужно это нифига не даёт таблицы это особенный зверь....


Таблицу распирает неразрывная последовательность....

есть два варианта с лишним дивом

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>тест</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
	body{
	width:1000px;
	}
	table{
	width:100%;
	}
	table td{
	border:1px solid red;
	}
	table div{
	width:100px;
	word-wrap:break-word;
	}
  </style>
 </head>
 <body>
  <table>
	<tr>
		<td><div>afadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafaafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfdfafadfafadfafadf</div></td>
		<td>afadf</td>
		<td>afadf</td>
		<td>afadf</td>
	</tr>
  </table>
  
 </body>
</html>


второй вариант без дива

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>тест</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
	body{
	width:1000px;
	}
	table{
	width:100%;
	table-layout:fixed;
	}
	table td{
	border:1px solid red;
	word-wrap:break-word;
	}
  </style>
 </head>
 <body>
  <table>
	<tr>
		<td>afadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafaafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfafadfdfafadfafadfafadf</td>
		<td>afadf</td>
		<td>afadf</td>
		<td>afadf</td>
	</tr>
  </table>
  
 </body>
</html>

Seva1986 15.10.2011 13:08

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


Часовой пояс GMT +3, время: 18:08.