CSS:动态宽度文本单行左对齐文本中的省略号，左对齐文本的宽度= 100%右对齐文本

时间：2021-10-11 12:37:21

I need to create a design in which the end user will see a single line of text with two components. The text-align:left div could have any arbitrary length of text. The text-align:right div will generally be about 9 or 10 characters long, but it could conceivably go as high as 20-some characters.

我需要创建一个设计，最终用户将看到带有两个组件的一行文本。文本对齐:左div可以有任意长度的文本。文本对齐:右div通常大约有9或10个字符长，但可以想象它的长度可能高达20多个字符。

Here's how it needs to appear to end users:

以下是它需要呈现给最终用户的方式:

  • The text-align:left text should use ellipsis to hide any text that doesn't fit on the screen in a single line of text.
  • 文本对齐:左边的文本应该使用省略号来隐藏任何不适合在屏幕上的文本。
  • The text-align-right text should always be on screen in that same single line.
  • 文本-别名-右文本应该始终在屏幕上的同一一行中。
  • The width of the text-align:left div should be equal to the width of the browser window less the width of the text-align:right text's div.
  • 文本对齐的宽度:左div应该等于浏览器窗口的宽度，而不是文本对齐的宽度:右文本的div。
  • The width of the text-align:right div should be equal to the width of the text within it plus its horizontal padding.
  • 文本对齐的宽度:右div应该等于其中文本的宽度加上它的水平填充。
  • The text needs to be vertically centered in the middle of the line.
  • 文本应该垂直居中。

I almost got this working in a fiddle, but in that I needed to use a fixed width for the text-align:right div. Here's the HTML:

我几乎把它放在了小提琴里，但是我需要使用一个固定的宽度来对齐文本:右div。

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right</div>
    </div>
</body>

and here's the CSS:

这里是CSS:

* {border:0; margin:0; padding:0;}

html, body {background-color:gray; height:100%; width:100%}

#left, #right {padding:5px;}

#left {
    background-color:red;
    float:left;
    text-align:left;
    width:calc(100% - 120px); /* deducted amount = width of #right + total horizontal padding*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
    width:100px;
}

I could conceivably jump to JQuery here and have it set the widths of both divs according to the width of the text-align:right div, but I'd really prefer to solve this with CSS if possible.

我可以在这里跳转到JQuery，让它根据文本对齐的宽度设置两个div的宽度:right div，但是如果可能的话，我更希望用CSS来解决这个问题。

Previously I tried to use display:table and display:table-cell to make this happen, but I ran into the various problems of using ellipsis with table-cell. Using table-layout:fixed didn't properly display ellipsis, nor did display:block, nor did setting a max-width. I'm happy to use table-cell if that will do it.

以前我尝试使用display:table和display:table-cell来实现这一点，但是我遇到了在使用table-cell时使用省略号的各种问题。使用表格布局:fixed没有正确显示省略号，display:block也没有设置最大宽度。如果可以的话，我很乐意使用表格单元。

So is there a way to do this using purely CSS?

那么是否有一种方法可以使用纯CSS来实现这一点呢?

2 个解决方案

#1

6  

1) Remove float:left from your left div and

1)删除浮动:从左div开始

2) Add display:block on your left div

2)添加显示:在您的左div上设置块

and bingo! - the right div takes up only as much space as it needs - without giving it a fixed width anymore.

宾果!-正确的div只占用它需要的空间-而不再给它一个固定的宽度。

UPDATED FIDDLE + FIDDLE 2 (just to prove it works)

更新的小提琴+小提琴2(只是为了证明它有效)

Markup

<div id="wrap">
        <div id="right">Right</div>
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div> 
</div>

CSS

#wrap
{
    width: 100%;
}
#left, #right {padding:5px;}

#left {
    background-color:red;
    text-align:left;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
}

#2

0  

Embrace the power of Flexbox! This approach allows you to maintain the order of the text as you intended them to appear in your markup (opposed to the float approach above). Here's a fiddle: Fiddle

拥抱Flexbox的力量!这种方法允许您维护文本的顺序，就像您希望它们出现在标记中一样(与上面的浮动方法相反)。这里有一个小提琴:小提琴

Polyfills are available for browsers that do not support flexbox.

对于不支持flexbox的浏览器，可以使用polyfill。

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right Right Right Right</div>
    </div>
</body>

CSS

CSS

#wrap {
    display:flex;
    justify-content:space-between;
}

#left,
#right {
    padding:5px;
}

#left {
    background:red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

#right {
    background:orange;
}

#1

6  

1) Remove float:left from your left div and

1)删除浮动:从左div开始

2) Add display:block on your left div

2)添加显示:在您的左div上设置块

and bingo! - the right div takes up only as much space as it needs - without giving it a fixed width anymore.

宾果!-正确的div只占用它需要的空间-而不再给它一个固定的宽度。

UPDATED FIDDLE + FIDDLE 2 (just to prove it works)

更新的小提琴+小提琴2(只是为了证明它有效)

Markup

<div id="wrap">
        <div id="right">Right</div>
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div> 
</div>

CSS

#wrap
{
    width: 100%;
}
#left, #right {padding:5px;}

#left {
    background-color:red;
    text-align:left;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
}

#2

0  

Embrace the power of Flexbox! This approach allows you to maintain the order of the text as you intended them to appear in your markup (opposed to the float approach above). Here's a fiddle: Fiddle

拥抱Flexbox的力量!这种方法允许您维护文本的顺序，就像您希望它们出现在标记中一样(与上面的浮动方法相反)。这里有一个小提琴:小提琴

Polyfills are available for browsers that do not support flexbox.

对于不支持flexbox的浏览器，可以使用polyfill。

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right Right Right Right</div>
    </div>
</body>

CSS

CSS

#wrap {
    display:flex;
    justify-content:space-between;
}

#left,
#right {
    padding:5px;
}

#left {
    background:red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

#right {
    background:orange;
}
标签：

相关文章