- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我试图制作一个包含 3 列的表格,其中第二列包含文本,并防止它对于屏幕来说太大,我定义它应该如下所示:
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
它工作正常,直到我将屏幕宽度减小到一个值,在该值中表格试图跟上不应该的文本宽度。在浏览器中进行测试时,我注意到当我删除 white-space: nowrap;
时,它允许表格调整大小以适合屏幕,但它使文本没有 省略号
并全部出现在屏幕上。
以下是一些正在发生的事情的图片:
代码:
table.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
}
table.table tr {
height: 7em;
}
table.table tr td {
background-color: #F7F7F7;
padding: 10px;
}
table.table td:first-child {
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
text-align: center;
width: 128px;
}
table.table td:last-child {
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
}
table.table td img {
max-width: 80px;
margin-top: 5px;
}
table.table td p {
margin: 0;
color: #636262;
}
table.table td p:first-child {
color: #1D1D25;
font-weight: 400;
margin-bottom: 5px;
}
table.table td p:last-child {
font-size: 14px;
}
table.table td p span {
color: #1D1D25;
}
table.table td:last-child a {
color: #636262;
display: inline-block;
margin: 0 10px;
text-decoration: none;
font-size: 1.3em;
cursor: pointer;
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
display: inline-block;
padding: 0 10px;
}
@media (max-width: 1040px) {
.center-mobile {
display: block;
text-align: center;
}
.center-mobile .flex-self-center {
padding-top: 7px;
}
.d-sm-none {
display: none;
}
table.table td:first-child {
width: 60px;
}
table.table td:last-child {
width: 110px;
}
table.table td:last-child a {
margin: 0 8px;
font-size: 0.9em;
}
.pageCount {
margin-top: 50px;
text-align: center;
}
.sign.desktop {
display: none !important;
}
.header .container-content .search-bar input {
padding-left: 0;
flex: 1;
}
.header .container-content .search-bar form {
display: flex;
}
table.table {
table-layout: fixed !important;
}
table.table td p:first-child {
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desk tr td:nth-child(2) {
max-width: 10px;
}
.mob {
display: none;
}
.mob td:nth-child(2) {
width: 100%;
}
.mob td:last-child div:first-child {
display: flex;
}
.mob td:last-child span {
padding-right: 0 !important;
}
.mob td:last-child .states {
right: 5px !important;
}
@media screen and (max-width: 1040px) {
.desk {
display: none;
}
.mob {
display: block;
}
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
display: inline-block;
padding: 0 10px;
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
font-size: 1.2em;
}
.table .actions {
text-align: right;
width: 100%;
position: relative;
bottom: -24px;
right: 4px;
}
.table .actions a {
font-size: 1.3em !important;
padding-top: 5px;
}
.table .col1 {
width: 100%;
text-align: right;
position: relative;
top: 12px;
padding-right: 10px;
}
.states {
position: relative;
right: 16px;
}
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<table class="table mob">
<tbody>
<tr>
<td>
<img :src="https://s4.thcdn.com/productimg/960/960/11534151-1964670429319264.jpg" alt="">
</td>
<td>
<p class="text-bold">Barra Proteica Light - 12 x 45g - Chocolate Branco e Framboesa</p>
<p>From the Store: <span>Fnac</span></p>
</td>
<td>
<div class="col1 d-inline-block">
<i v-if="x.price !== x.last_price" class="states fa fa-chevron-down text-success"></i>
<span>10EUR</span>
</div>
<div class="actions d-inline-block">
<a class="fas fa-sliders-h"></a>
<a target="_blank" rel="nofollow noopener nofollow" class="fa fa-link"></a>
<a class="fa fa-times"></a>
</div>
</td>
</tr>
</tbody>
</table>
最佳答案
在您的任务中,指定断点的确切宽度 (width: 50px
) 以及最小宽度 (min-width: 100%
) 非常重要> ) 用于在宽屏幕上显示全文。你的选择器应该是这样的:
table.table td p:first-child {
/*max-width: 90%;*/ /*delete this it*/
width: 50px; /*add this it*/
min-width: 100%; /*add this it*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
}
table.table tr {
height: 7em;
}
table.table tr td {
background-color: #F7F7F7;
padding: 10px;
}
table.table td:first-child {
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
text-align: center;
width: 128px;
}
table.table td:last-child {
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
}
table.table td img {
max-width: 80px;
margin-top: 5px;
}
table.table td p {
margin: 0;
color: #636262;
}
table.table td p:first-child {
color: #1D1D25;
font-weight: 400;
margin-bottom: 5px;
}
table.table td p:last-child {
font-size: 14px;
}
table.table td p span {
color: #1D1D25;
}
table.table td:last-child a {
color: #636262;
display: inline-block;
margin: 0 10px;
text-decoration: none;
font-size: 1.3em;
cursor: pointer;
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
display: inline-block;
padding: 0 10px;
}
@media (max-width: 1040px) {
.center-mobile {
display: block;
text-align: center;
}
.center-mobile .flex-self-center {
padding-top: 7px;
}
.d-sm-none {
display: none;
}
table.table td:first-child {
width: 60px;
}
table.table td:last-child {
width: 110px;
}
table.table td:last-child a {
margin: 0 8px;
font-size: 0.9em;
}
.pageCount {
margin-top: 50px;
text-align: center;
}
.sign.desktop {
display: none !important;
}
.header .container-content .search-bar input {
padding-left: 0;
flex: 1;
}
.header .container-content .search-bar form {
display: flex;
}
table.table {
table-layout: fixed !important;
}
table.table td p:first-child {
/*max-width: 90%;*/
width: 50px;
min-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desk tr td:nth-child(2) {
max-width: 10px;
}
.mob {
display: none;
}
.mob td:nth-child(2) {
width: 100%;
}
.mob td:last-child div:first-child {
display: flex;
}
.mob td:last-child span {
padding-right: 0 !important;
}
.mob td:last-child .states {
right: 5px !important;
}
@media screen and (max-width: 1040px) {
.desk {
display: none;
}
.mob {
display: block;
}
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
display: inline-block;
padding: 0 10px;
}
table.table td:last-child .col1 i,
table.table td:last-child .col1 span {
font-size: 1.2em;
}
.table .actions {
text-align: right;
width: 100%;
position: relative;
bottom: -24px;
right: 4px;
}
.table .actions a {
font-size: 1.3em !important;
padding-top: 5px;
}
.table .col1 {
width: 100%;
text-align: right;
position: relative;
top: 12px;
padding-right: 10px;
}
.states {
position: relative;
right: 16px;
}
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<table class="table mob">
<tbody>
<tr>
<td>
<img :src="https://s4.thcdn.com/productimg/960/960/11534151-1964670429319264.jpg" alt="">
</td>
<td>
<p class="text-bold">Barra Proteica Light - 12 x 45g - Chocolate Branco e Framboesa</p>
<p>From the Store: <span>Fnac</span></p>
</td>
<td>
<div class="col1 d-inline-block">
<i v-if="x.price !== x.last_price" class="states fa fa-chevron-down text-success"></i>
<span>10EUR</span>
</div>
<div class="actions d-inline-block">
<a class="fas fa-sliders-h"></a>
<a target="_blank" rel="nofollow noopener nofollow" class="fa fa-link"></a>
<a class="fa fa-times"></a>
</div>
</td>
</tr>
</tbody>
</table>
关于html - 空白 : nowrap; css style not allowing for table to be responsive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64642505/
我有一个包含以下内容的简单服务: import { Injectable } from '@angular/core'; import { Http, Response } from '@angula
在我的 Angular-12 应用程序中,我在服务中有以下代码: constructor(private http: HttpClient, private router: Router) {
我是android领域的新手,我想从响应json数组访问每个结果元素,但我无法做到这一点,我试图获取每个元素,但我只得到一个值“rohit1”是第一个元素。请帮助我。 我是 rohit parmar,
我正在用 java 编写 RESTful 服务,但是当我尝试使用 Resource 类时,显示以下错误:类型 Response.Response 构建器不可见。我不明白问题可能是什么,因为我已经导入了
在 Spring 应用程序中,我正在调用第三方服务,我正在发送 XML 请求并获取 XML 响应,当无法将该响应解析为 Java 对象时,我正确地获得了 XML 响应,我收到以下错误: org.spr
我正在发布一个页面 URL 例如 mysite.com/disclaimer/someinfo 此页面显示协议(protocol),如果用户单击同意按钮,则 PDF 文件将作为附件流式传输。 这样做的
我是 Camel 的新手。我一直在尝试将数据(文件中的 Json)提交到网络服务。这是我的代码: public static void main(String args[]) throws E
我有一个 HTTP 执行器类: Future future = service.apply(request).toJavaFuture(); 现在我想删除 ? extends其中的一部分,因为我不想让
我想将我所有的 http header 响应设置为这样的: response.headers["X-Frame-Options"] = "SAMEORIGIN" 我检查了this question ,
我们有两个 channel ,分别是 channelA 和 channelB。 在 channel A中我们有两个目的地 一个。第一个目的地将使用 XML 数据作为输入调用 channelB,并从 c
以下有什么区别 response.status(200).send('Hello World!'); 和这个 response.writeHead(200, {'content-type':'appl
我试图让Foundation在iPhone的浏览器上响应。我已经在手机上尝试过Safari和Chrome,它们都显示了 table 面布局。 但是,在 table 面上,如果缩小浏览器窗口,则会看到布
您好,当我在云代码中运行此作业时,我收到一条错误日志:Failed with: success/error was not called. 定义功能运行良好,但在作业日志中我有此错误日志。请协助我解决
我正在使用ozeki ng短信网关。我无法将任何短信发送到任何手机。请帮助我通过网络发送短信到手机 从客户端检测到一个潜在危险的Request.Form值(textboxError =“。设置此值之后
今天我在 WordPress 中遇到了问题。当我尝试创建一个新页面并在 WordPress 管理部分上传新图像时,我尝试找出解决方案,但我没有得到它......所以经过一个小时的打磨后我得到了一个解决
我过去常常通过刷新和结束来结束对客户端的传输,如下面的代码所示。 Response.Flush(); Response.End(); 但是,Response.End() 将缓冲内容刷新到客户端让我印象
我正在编写一个在单击按钮时显示对话框窗口的函数:这里是与状态和 statusCode 相关的代码段。 if(response.status>300){
从资源清理的角度,为什么会有Response.Close()和Response.Dispose(),哪个更全面(调用另一个)? 最佳答案 在提供这两种方法的情况下,Dispose 的实现应该调用 Cl
在我注意到我的代码可能在以经典模式设置的服务器上运行之前,我一直在使用 Response.Header.Add()。在这种情况下,异常“此操作需要 IIS 集成管道模式”。被提出。 我切换到 Resp
Response.End() 生成 ThreadAbortException。 使用 HttpContext.Current.ApplicationInstance.CompleteRequest 代
我是一名优秀的程序员,十分优秀!