问题 在列表项的中间使用文本溢出省略号


我正在尝试实现HTML / CSS，其中有四个列表项（li）在全宽度无序列表元素内（ul），但我正努力让其中一个项目使用 text-overflow:ellipsis 命令。

结果应该是这样的......

+-------------------------------------------------------------------------------------------+
| Item One | Item Two Two Two Two Two Two Two Two Two Two Two ...  | Item Three | Item Four |
+-------------------------------------------------------------------------------------------+

第1，第3和第4项目将被锁定在位置 - 左侧第1项，第3项和第4项“锁定”到全宽区域的右侧。

第二项应占用所有剩余空间 ... 省略号溢出。

该区域将在响应式设计中使用，因此将根据可用的屏幕区域进行扩展/缩小。

所有 其中四个项目将包含可变数量的文本，但第二个项目将始终拥有最多。因此，第1，第3和第4应始终完全可见......但第2应该隐藏不适合的东西。

这是我最接近的（使用两个 ul 控件，浮动右侧的第3和第4项），但是只要我为第2项添加CSS，一切都会出错。 （通过“错误”，我的意思是第二项包裹在下一行而不是停留在同一行并显示 ...）

#leftul {
    width:100%;
}
#rightul {
    float:right;
}
ul {
    margin:0;
    padding:0;
}
li {
    list-style-type:none;
    display:inline-block;
    border:1px solid black;
}
#leftul #leftlarge {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
<ul id="rightul">
    <li>Item Three</li>
    <li>Item Four</li>
</ul>
<ul id="leftul">
    <li>Item One</li>
    <li id="leftlarge">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</li>
</ul>

9253
2017-08-31 12:56


起源

答案:

这段代码工作正常，试试这种方式

<div class="left">left</div>
<div class="right">right</div>
<div class="right">right</div>
<div class="middle"><div  class="flexible_width1">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</div></div>

CSS：

.left{
    background:red;
    min-width:70px;
    float:left;

}
.middle{
    background:yellow;

}
.right{
    float:right;
    min-width:70px;
    background:green
}
.flexible_width1 {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

}

演示


6
2017-08-31 13:55


谢谢你的回答，但是第1，第3和第4项将包含可变文本（它们不会总是相同，因此我无法设置固定宽度） - freefaller
@freefaller你可以使用min-width作为第1，第3和第4项 - Arun Kumar M
想想你可能会在这里做点什么！ - freefaller
如果要添加文本溢出：省略号;只有一个项目，这将解决您的问题。 - Arun Kumar M
优秀 - 究竟 我在寻找什么。谢谢 ：-） - freefaller

答案:

这段代码工作正常，试试这种方式

<div class="left">left</div>
<div class="right">right</div>
<div class="right">right</div>
<div class="middle"><div  class="flexible_width1">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</div></div>

CSS：

.left{
    background:red;
    min-width:70px;
    float:left;

}
.middle{
    background:yellow;

}
.right{
    float:right;
    min-width:70px;
    background:green
}
.flexible_width1 {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

}

演示


6
2017-08-31 13:55


谢谢你的回答，但是第1，第3和第4项将包含可变文本（它们不会总是相同，因此我无法设置固定宽度） - freefaller
@freefaller你可以使用min-width作为第1，第3和第4项 - Arun Kumar M
想想你可能会在这里做点什么！ - freefaller
如果要添加文本溢出：省略号;只有一个项目，这将解决您的问题。 - Arun Kumar M
优秀 - 究竟 我在寻找什么。谢谢 ：-） - freefaller

将此代码与j查询一起使用 

#table {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

        #table > div {
            display: table-cell;
        }

            #table > div:first-child {
                display: inline-block;
                background: red;
            }

            #table > div:nth-child(2) {
                width: 100%;
                background: yellow;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            #table > div:nth-child(3) {
                display: inline-block;
                background: aqua;
            }

            #table > div:nth-child(4) {
                display: inline-block;
                background: lightgray;
            }

HTML 

<div id="table">
    <div>first</div>
    <div>second second second second second second second second </div>
    <div>third</div>
    <div>fourth</div>
</div>

jQuery的

$(document).ready(function () {
        var first_row = $('#table>div:first-child').width();
        $('#table>div:first-child').css('width', first_row + 'px')
        $('#table>div:first-child').css('display', 'table-cell')

        var first_row1 = $('#table>div:nth-child(3)').width();
        $('#table>div:nth-child(3)').css('width', first_row1 + 'px')
        $('#table>div:nth-child(3)').css('display', 'table-cell')

        var first_row2 = $('#table>div:nth-child(4)').width();
        $('#table>div:nth-child(4)').css('width', first_row2 + 'px')
        $('#table>div:nth-child(4)').css('display', 'table-cell')

    })

4
2017-08-31 13:34


如果您打算使用其他人的答案代码作为答案的基础，至少可以给予他们信任！只是消化你写的东西 - freefaller
这是一个非常有趣的想法......我目前正在看我是否可以将它集成到我当前的解决方案中 - freefaller
谢谢你的回答，但已经提供了一个纯粹用CSS做的答案 - freefaller

你必须设置 width 对元素。

#leftul {
    width:100%;
}
#rightul {
    float:right;
}
ul {
    margin:0;
    padding:0;
}
li {
    list-style-type:none;
    display:inline-block;
    border:1px solid black;
}
#leftul #leftlarge {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:40%;
}
<ul id="rightul">
    <li>Item Three</li>
    <li>Item Four</li>
</ul>
<ul id="leftul">
    <li>Item One</li>
    <li id="leftlarge">Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</li>
</ul>


2
2017-08-31 12:59


嗯......那可能是个问题。该区域应该是“全宽”，即在响应式设计中，第二项应该占用所有可用空间，第三和第四项“锁定”到右侧 - freefaller
@freefaller使用溢出：隐藏;宽度固定对吗？ - Lalji Tadhani
对不起@Lalji，我不明白。你是在问一个问题，还是把一个陈述伪装成一个问题？ - freefaller

如果通过 locked 你的意思是元素会有一个 fixed 宽度，然后你可以使用 display:table/table-cell 实现这一点：

body{margin: 0}

#table{
    display:table;
    width:100%;
    table-layout: fixed;
}

#table>div{
    display:table-cell;
}

#table>div:first-child{
    width: 100px;
    background:red;
}

#table>div:nth-child(2){
    width: 100p%;
    background:yellow;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#table>div:nth-child(3){
    width: 100px;
    background:aqua;
}

#table>div:nth-child(4){
    width: 100px;
    background:lightgray;
}
<div id="table">
    <div>first</div>
    <div>second second second second second second second second </div>
    <div>third</div>
    <div>fourth</div>
</div>

第二个单元格总是占用剩余的全部宽度。

检查小提琴响应


2
2017-08-31 13:14


不幸的是，我看起来很模糊 - 当我的意思是锁定时，我的意思是锁定在全宽区域的左侧或右侧。第1 /第3 /第4项将包含可变长度的内容。但这更接近......如果我能弄清楚如何使其适用于可变内容 - freefaller
@freefaller“可变内容”是什么意思？ - Vucko
对不起@Vucko，看来我的解释很糟糕。这个“全宽区域”将在响应式设计中使用。四个面板将在不同的情况下保存不同的（可变的）文本，它们永远不会是固定的文本，因此我不可能在它们上设置特定的宽度。我需要第1，第3和第4项尽可能小但文本完全可见 - 然后第2项占据其余空间，隐藏不适合的项目（最好是 ... 省略。那更有意义吗？ - freefaller
@freefaller好吧，我不相信它只能用CSS做。每天你都学到新东西:) - Vucko
正如我已故的祖母曾经说过的那样，“如果你不小心的话，你每天都会学到新的东西！” ;-) - freefaller

也许这可以帮助你： 的jsfiddle

<div id="navcontainer">
    <ul>
        <li>Item One</li>
        <li>Item Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
    </ul>
</div>

#navcontainer ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

#navcontainer ul li 
{ 
    display: inline-block;
    border:1px solid black; 

    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

它应该是你要找的:)


2
2017-08-31 13:52


感谢您的回答，但它既不占用屏幕/区域的整个宽度，也不会扩展第二项以使用所有可用空间。 - freefaller

热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来