如何使用css让td中的文字自动换行

html-css017

如何使用css让td中的文字自动换行,第1张

1、首先打开hbuilder软件，新建一个html文件，里面设置一个3行一列的table表格。

2、然后在style标签中设置table的样式，给table一个宽度和高度，并且把字体调大，设置背景色；再设置td的样式，给它们添加word-wrap和word-break两个属性就可以了，此css属性表示  在长单词或 URL 地址内部进行换行。

3、然后打开浏览器，就可以看到文字已经自动换行了。

直接使用css的标签选择器就可以实现

td input[type='text'] {.../*设置需要的样式*/}

举个例子：

创建Html元素

<table>

<tr>

<td>name</td>

<td><input type="text"></td>

<td>sex</td>

<td><input type="radio" name="sex" checked>男<input type="radio" name="sex">女</td>

</tr>

<tr>

<td>tel.</td>

<td><input type="text"></td>

<td>addr.</td>

<td><input type="text"></td>

</tr>

</table

设置css样式

table{border-collapse: collapse}

td{border:1px solid #cccpadding:5px}

/*设置单元格中文本框的样式*/

td input[type='text']{border:1px solid greenborder-radius:3pxheight:30px}

观察显示效果