CSS:如何在<td>中包装没有空格的文本？
在HTML中，<td>标签用于表示表格中的单元格。要在<td>中包装没有空格的文本，可以使用CSS样式来实现。以下是一种方法：
- 在
<style>标签中或外部CSS文件中添加以下CSS样式：
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}这段CSS样式将<td>中的文本设置为不换行，并在文本超出单元格宽度时显示省略号（...）。
- 在HTML文件中添加
<style>标签，并将上述CSS样式添加到<style>标签内：
<!DOCTYPE html>
<html>
<head>
<style>
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table>
<tr>
<td>这是一个没有空格的文本</td>
</tr>
</table>
</body>
</html>这样，在<td>中的文本将不会换行，并且在文本超出单元格宽度时显示省略号。
推荐的腾讯云相关产品：腾讯云对象存储（COS）、腾讯云内容分发网络（CDN）、腾讯云云巢（TKE）。
产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云云巢（TKE）：https://cloud.tencent.com/product/tke
相关·内容
3回答
长文本应由css隐藏。
css、text、overflow
我有这样的密码。html：
<div>
<h3>Sometext</h3>
</div>
css：
div {
width: 20px;
}
h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这里的问题是H3标签"Sometext“应该只写为"Somete”，但是溢出和文本溢出都没有帮助。仍然可以看到H3标签。
浏览 4提问于2017-10-11得票数 0
回答已采纳
14回答
CSS文本-表单元格中的溢出？
css、overflow
我想在表格单元格中使用CSS text-overflow，这样如果文本太长，一行无法容纳，它将使用省略号裁剪，而不是换行到多行。这个是可能的吗？
我试过这个：
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展，将表格的总宽度推到超出其容器的宽度。但是，如果没有它，文本在到达单元格边缘时将继续换行为多行。
浏览 11提问于2012-03-20得票数 573
回答已采纳
5回答
在包装器内的两个跨中之一上的文本溢出省略
html、css
我对省略号有问题。以下是我的HTML：
<div id="wrapper">
<span id="firstText">This text should be effected by ellipsis</span>
<span id="lastText">this text should not change size</span>
</div>
有什么方法可以用纯css来实现吗？以下是我尝试过的：
#firstText
{
overflow: hid
浏览 0提问于2011-11-14得票数 76
回答已采纳
7回答
如何在td单元格内垂直对齐div文本？
html、html-table
这是一个3x3的表格：
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font
浏览 1提问于2011-12-08得票数 1
回答已采纳
我正在努力实现以下目标：
使用以下命令可以很容易地让省略号对一项起作用：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
然而，在这个例子中，我有两个项目要截断。
其中一个需要在另一个下面。
我遇到的问题是，文本一进入div (这样我就可以应用flex-direction: column)，text-overflow: ellipsis就不工作了，因为它在容器中。
如何用CSS实现上面图片的例子？
浏览 9提问于2019-07-25得票数 0
3回答
CSS -防止表格单元格扩展和截断长文本
html、css
有人能告诉我为什么这不是截断文本吗？最后一个细胞一直在生长。我不希望细胞生长超过其允许的百分比。
<HTML>
<TABLE id=section1 width="100%">
<TBODY>
<TR style="TEXT-OVERFLOW: ellipsis; DISPLAY: table-cell; WHITE-SPACE: nowrap; FONT-SIZE: 12px; OVERFLOW: hidden;">
<TD s
浏览 0提问于2012-03-16得票数 6
回答已采纳
3回答
Vuetify数据表组件-使用CSS截断单元格中的文本
css、vue.js、vuetify.js
在下面的示例中，是否有任何方法可以使用CSS截断单元格中的文本(而不是让它环绕或溢出)？理想情况下，CSS应该如下所示：
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是，如下所示，这只会导致单元格占用所有的空间：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,
浏览 0提问于2020-04-04得票数 4
回答已采纳
1回答
在pandas jupyter实验室中如何取回文本省略
python、css、pandas、jupyter-lab
我在jupyter实验室里展示了一个熊猫的数据框架。有些单元格具有非常长的文本，如果我放入：df.style，它将使行非常高。设置:不幸的是，df.style.set_table_styles([dict(selector="tr",props=[('text-overflow', 'ellipsis'),('overflow', 'hidden'), ('height', '20px')])])没有任何效果。 我通过将高度设置为较高的值来确认正在使用该设置，它可以工作并更改行高度
浏览 40提问于2019-03-04得票数 0
1回答
扩展在IE中不起作用
css
我有一个表，并在其中我已经添加了内联css显示圆点，如果文本是bigger.Its在其他浏览器中，除了在IE9工作正常
下面是我的代码
<table class="table table-bordered table-condensed hardware-software-table">
<tbody><tr style="background-color: #8A8A8D; color: #fff;">
&
浏览 1提问于2015-02-09得票数 0
2回答
固定右列和最小左列的两列布局
html、css
我需要这样的东西
------------------------------
| Some text | fixed-teeeeext |
------------------------------
-----------------------------------
| Some long text | fixed-teeeeext |
------------------------------------
-----------------------------------------
| Some very long te... | fixed-teeeeext |
---
浏览 5提问于2012-10-18得票数 1
回答已采纳
1回答
在td内截断div中的文本(单位相对宽度)
html、css、truncate
我只需要截断以下示例的css文本。
<table border="1" width="100%" cellspacing="1" cellpading="1">
<tr>
<td align="center" width="50%">
<div>test1 test1 test1 test1test1 test1test1 test1test1 test1test1 test1test1 test1test1 tes
浏览 11提问于2017-07-27得票数 0
2回答
在表单元格内的div中使用span管理文本溢出
html、css、text、overflow
我在span元素中有一个很长的文本，我想使用省略号截断它。span元素位于div元素中，div元素位于表单元格内。
如何以单元格大小截断长文本。
在这里，HTML代码片段：
<table>
<tr>
<td>
<div>
<span>
this is a long sentence to test the text overflow
</span>
</div>
</td>
</tr>
和CSS代码：
浏览 3提问于2014-06-13得票数 2
回答已采纳
1回答
如何才能说服IE遵守我的显式指令，使表列宽度达到X像素？
html、internet-explorer、html-table
请考虑这一小块但完整的HTML：
<!DOCTYPE html >
<html>
<head>
<title>Test</title>
<style type="text/css">
span {overflow:hidden; white-space:nowrap; }
td {overflow:hidden; text-overflow:ellipsis}
</style>
</head>
<body>
<tab
浏览 1提问于2013-10-24得票数 0
1回答
外部<td>上的最大宽度不适用于内部跨度
html、css、angular-ui-bootstrap
当我将鼠标悬停在表格单元格上时，它应该会在文本旁边显示角度引导弹出窗口。但是，“span”元素仍然是它的全宽。
<td style="max-width: 50px; text-align: left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<span popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="r
浏览 2提问于2017-11-01得票数 0
2回答
我有一个有很多td的表，其中css是
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
max-width:84px;
padding-left:10px;
所有这些都可以正常工作，但对于那些文本溢出:省略；不能工作，在一些td中也有可编辑的div。
它们是隐藏的，但没有.作为内容
编辑
这里是我用来生成表的HTML
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
浏览 3提问于2013-06-06得票数 1
回答已采纳
1回答
我正在尝试使用CSS在我的长文本上显示一个省略号。当文本不包含空格时，这似乎可以很好地工作，因此不能断开(即换行)，但当文本包含空格时，省略号不会出现。
我的代码是：
<!DOCTYPE html>
<html>
<head>
<style>
span {
width: 150px;
display: inline-block;
border: 1px dotted blue;
height: 1em;
overflow: hidden;
text-overflow: ell
浏览 0提问于2013-05-28得票数 1
回答已采纳
3回答
文本溢出不适用于HTML5
css、html
下面的代码可以在chrome上正常工作。但不是在firefox或IE上。将<!DOCTYPE html>标签添加到此代码中，会导致它在chrome上也不起作用。text-overflow已经被弃用了吗？如何使其与所有浏览器和HTML5兼容？
<head>
<style type='text/css'>
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
浏览 0提问于2013-05-14得票数 3
回答已采纳
1回答
溢出隐藏设置在IE 11、Firefox中无效
html、css、twitter-bootstrap
请参阅我期望的描述实际上隐藏了覆盖的内容，并只显示文本分配的宽度百分比。(在本例中为17%)。我正在使用引导3.3.7版本的CSS样式。我不知道是什么导致了这个问题。
有人能帮我解决这个问题吗？
<table class="table table-hover table-striped mytable" rules="all" id="gvTimeEntries" style="border-collapse:collapse;" cellspacing="0" border="1">
浏览 2提问于2017-08-07得票数 0
回答已采纳
3回答
溢出时没有出现的点
html、css、html-table、overflow
我有一张桌子中间的单元格里有很长的文字。我发现下面的CSS理论上应该可以防止文本溢出，并在结尾添加一些点。它确实防止它溢出，但没有任何点。你能帮我理解一下为什么吗？
我希望是这样:长特克斯..。
.headlinesStyle {
position: relative;
overflow: hidden;
display: block;
width: 100%;
height: 18px;
white-space: normal;
color: transparent !important;
}
.headlinesStyle::selection {
c
浏览 0提问于2018-07-06得票数 0
回答已采纳
4回答
文本溢出:省略号不适用于表格单元格超链接
javascript、html、css
有没有人可以帮我解决下面的问题。我有一个表格，在一次单元格中有一些超链接。当文本超过单元格宽度时，我想显示3个点。基本上我想每行只显示一个链接，如果在超链接中有一个很长的文本，它不应该溢出到下一行。浏览器: IE
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-
浏览 0提问于2016-10-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
