代码之家  ›  专栏  ›  技术社区  ›  Simon Lieschke

在HTML行文本被右对齐内容遮挡之前溢出

css3 positioning css html
  •  3
  • Simon Lieschke  · 技术社区  · 15 年前

    我有一些文本显示在一个固定宽度的容器中的单行上。如果文本不能包含在容器的宽度内,溢出将被隐藏。三个状态图标的任意组合都可能出现在容器的右侧。如果出现这些图标中的任何一个,我希望在第一个图标出现之前隐藏文本溢出,这样文本就不会在图标后面被遮挡。

    如何使文本溢出,使其不在图标下流动(理想情况下只使用css,不需要使用javascript)?

    下面是我开始使用的css和html的一个例子(它们都不是用具体的方式设置的)。 Here's a live example 也说明了所需结果的代码(注意,它在css中使用 data URI scheme 因此在8之前的Internet Explorer版本中不起作用)。

    CSS: 

    .line {
  position: relative;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star, .circle, .flag {
  position: absolute;
  top: 3px;
  height: 23px;
  width: 15px;
  background-image: url(icons.png);
}

.star {
  right: 30px;
}

.circle {
  right: 15px;
  background-position: -17px 0;
}

.flag {
  right: 0;
  background-position: -32px 0;
}

    HTML格式: 

    <div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
    This is some text that should have overflow that is hidden.
    <div class="flag"></div>
</div>
<div class="line">
    This is some text that should have overflow that is hidden.
    <div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
    This is some text that should have overflow that is hidden.
    <div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
    This is some text that should have overflow that is hidden.
    <div class="star"></div><div class="flag"></div>
</div>
<div class="line">
    This is some text that should have overflow that is hidden.
    <div class="circle"></div>
</div>
    5 回复  |  直到 15 年前
        1
  •  1
  •   Tim Büthe    15 年前

    您可以直接在包含文本的div中使用背景图像,并使用填充为图标腾出一些空间。

    编辑:

    这是一个工作的例子,但是我不能让“nowrap”工作,所以我用了一个高度来作弊: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.star {
    background-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00.%00%00%00%10%08%06%00%00%00i%C9M%EA%00%00%00tIDATH%C7%ED%96Q%0A%C0%20%0CC%7B%98%C9%EE%7F%C2y%01%91%2C%BE%0C%19%16%FCl%F3%AC5Z%F5%C7%B8%AF%F6%1CpQOYr%11%02%80%00%96X%5CpG%D4%06~%B3%E3Y%A1%95%8E!%A3%91%10ws%A3G%9D%D88v%BB)GP%C0Q%5B%A2%EC%2Cf%C1%AB%A2%04%B8%05%3FJ%A4%BA%1E%7B%F8%14%ABK%8E%9A%DDu%C59%EA%A38%FF%A4%DD%A2%03%C8d%24%84%B6%AC%BF%C0%00%00%00%00IEND%AEB%60%82');
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.line {
    width: 200px;
    overflow: hidden;
    height: 20px;
}
</style>
</head>
<body>
    <div class="star line">This is some text that that should have overflow that is hidden.</div>
    <div class="star line" style="padding-right: 0px;">This is some text that that should have overflow that is hidden.</div>
</body>
</html>

    看起来你必须使用单个图像而不是精灵,但是你可以直接将填充添加到star、circle和flag类中。

        2
  •  1
  •   merkuro    15 年前

    也许我不太明白你的意思,但是把.star,.circle,.flag的背景色设置为“白色”并使用“z-index”怎么样?可以说,这确实是一个技巧,但也许对你有用。

    更新

    刚刚根据你的代码做了一个尝试。仅在FF、Opera、IE8上工作: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
  .line{
    position: relative;
    width: 200px;
  }  
  .star,
  .circle,
  .flag{
    top: 3px;
    height: 23px;
    width: 15px;
    background-repeat:no-repeat;
    background-image: url('data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00.%00%00%00%10%08%06%00%00%00i%C9M%EA%00%00%00tIDATH%C7%ED%96Q%0A%C0%20%0CC%7B%98%C9%EE%7F%C2y%01%91%2C%BE%0C%19%16%FCl%F3%AC5Z%F5%C7%B8%AF%F6%1CpQOYr%11%02%80%00%96X%5CpG%D4%06~%B3%E3Y%A1%95%8E!%A3%91%10ws%A3G%9D%D88v%BB)GP%C0Q%5B%A2%EC%2Cf%C1%AB%A2%04%B8%05%3FJ%A4%BA%1E%7B%F8%14%ABK%8E%9A%DDu%C59%EA%A38%FF%A4%DD%A2%03%C8d%24%84%B6%AC%BF%C0%00%00%00%00IEND%AEB%60%82');
  }  
  .star{
    right: 30px;
  }  
  .circle{
    right: 15px;
    background-position: -17px 0;
  }  
  .flag{
    right: 0;
    background-position: -32px 0;
  }
  </style>
  </head>
  <body>
    <h1>Current results:</h1>     
    <div class="line" style="background-color:red;">        
        <div class="star" style="display:inline;float:right"></div>
        <div class="flag" style="display:inline;float:right"></div>
        <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">This is some text that should have overflow that is hidden.</div>
    </div>
  </body>
</html>
        3
  •  0
  •   Conspicuous Compiler    15 年前

    您的问题是,您希望基于父标记的特定类型的子标记的数目来影响父标记的呈现。如果没有一些程序干预,这是不可能的。

    如果您是以编程方式生成这些列表的,我建议您只添加三个类,它们指定到外部的行的宽度 div 以下内容: 

    .line {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.noicon {
   width: 200px
}

.oneicon {
   width: 183px
}

.twoicon {
   width: 168px
}

.threeicon {
   width: 154px
}


    <div class="line noicon">This is some text that should have overflow that is hidden.</div>
<div class="line oneicon">
        This is some text that should have overflow that is hidden.
        <div class="flag"></div>
</div>
<div class="line twoicon">
        This is some text that should have overflow that is hidden.
        <div class="star"></div><div class="flag"></div>
</div>
<div class="line threeicon">
        This is some text that should have overflow that is hidden.
        <div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>

    否则,最好的选择可能是使用javascript动态地缩小框。

        4
  •  0
  •   mercator    15 年前

    要让这些图标影响文本的宽度,最简单的方法是将它们放在文本前面(不管怎样,它们都是绝对定位的),并为文本本身提供一个容器(我很确定你需要这样做,无论你用什么方法)。所以你的结局是: 

    <div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
    <div class="flag"></div>
    <div class="text">This is some text that should have overflow that is hidden.</div>
</div>
<div class="line">
    <div class="circle"></div>
    <div class="flag"></div>
    <div class="text">This is some text that should have overflow that is hidden.</div>
</div>

    这里是唯一一个新的css,你需要让它工作(除了在问题中的css): 

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

.flag   ~ .text { width: 183px; }
.circle ~ .text { width: 168px; }
.star   ~ .text { width: 154px; }

    这个 .text 规则与 .line div 你用自己的例子。真正的“魔法”发生在那些最后的规则,他们是我移动图像div的原因。允许您使用 CSS3 sibling selector 设置 。文本 div基于图标的存在。您只需按照从右到左的顺序列出图标类,就可以让css级联处理宽度。

    顺便说一句,我不得不说这里有很多div,所以没有迹象表明它的实际含义。您的第一个关注点应该始终是创建语义html。

    我可能想把文本放在段落标签中,图标放在列表中,给每个列表项一个文本描述(用css隐藏)。再说一次,也许这不太合适(也许图标div真的应该来 之后 文本);我不知道。如果图标出现在列表中,兄弟选择器将需要一些帮助…

        5
  •  0
  •   facepalmd    15 年前

    我不能评论梅库罗的回答和你的回答(太少了点),所以我在这里补充如下: 您可以使用不透明img覆盖的行的占位符图像,这样,一旦放置,它将覆盖文本和行,但是背景行看起来是不间断的,因为图像有一条与后面的实际行整齐对齐的行。你可以利用 hover: 当线条改变颜色时切换图像等(目前我能想到的最好的方法)

    另外,如果你只使用一个符号(星号、圆圈、旗号)来分隔图像,并用不透明的空白将图像向右填充到你想要覆盖的宽度,你会得到类似的结果(我已经尽力对base64图像进行了编码,但它只在ff中有效)。css应该能够正确地处理正确的链接图像)。

    CSS: 

    .line {
  position: relative;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star,
.circle,
.flag {
  position: absolute;
  top: 3px;
  height: 23px;
  right: 0px;
}

.star {
  width: 45px;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAE5JREFUKFOd0jEOACAIA8Dy%2F0%2BLDQY3WlhcDlIJCKtQ%2Br1D844D2vhSOk%2FZNf07pxs6GKYaptFX0tALesXNMAwipfmg4sn1u5H20Tsz%2BQHT4AKfEabvTAAAAABJRU5ErkJggg%3D%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAQCAIAAADBBVtVAAAAfUlEQVR4nNVVQQrAIAyz4v%2B%2F3B0K%0AzuEYth0p6UmF1hiSKKraOKvnR4hIfkigfoBeVVnoRnkJ8cSsi9emhwQD3O9m%2FQQTJrXcrN%2Bdb%2FQj%0Aozau9R0l%2BIsgtmkc%2Bi4YcESOZP8UCT7au926Xvy9nYftKW5bIx9AbNN4OJYXccJcMFQtIo2LoIEA%0AAAAASUVORK5CYII%3D');
}

.circle {
  width: 30px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAENJREFUKFO10UEOACAIA8Hy%2F08rSPC6NZHzpBCqsEaWjieuHLKnUGnkk7cm3ucTDuJ3usn%2F3u4%2Bsj2uicBjUPU3zuQLvrYCj5S%2FhI4AAAAASUVORK5CYII%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAIAAADmq9q9AAAAaUlEQVR4nO1VQQ7AIAhrjf%2F%2FMjuO%0AGOVAF8VkvWFiKAUKzQw10E4TeFGISlc%2Bk%2FSh2Ou8KgOP6csOKqusCptCs5KhEpeeFuZyVeJNSe%2FR%0A5apgXbpiLQ0AST9rcRhkFS1OcttvTyn%2FyzzBA%2B9YHizbV3zJAAAAAElFTkSuQmCC');
}

.flag {
  width: 15px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAQCAMAAABeF73YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA%2F%2F%2F%2FAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZ3bsYwAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAAExJREFUKFO10LECACAERVH%2B%2F6dTJJtryNB06CE6KhlpPVyyumbjD%2FdfVd6N3jleFqALJzpXRdjD2LJQO48X9ASn48NNOfSX%2FeXgKpssziECqaokJE4AAAAASUVORK5CYII%3D');
  //background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAQCAIAAABhmjO7AAAAbElEQVR4nLWSUQ7AIAhDqdn9r8w%2B%0ASJyJ2pki%2FVPio0Lh7lamVoc2s0d%2BCYBUYyQKnXM7WqSfcEPK3HdBmO%2BvbXXZEnIi%2B%2FQJIeudm9Pp%0AJ5%2FOeufpTNF%2F7bfoP1rgx1mkWrtVPZEfAlvIBTrRC7wOMBc8CAoqAAAAAElFTkSuQmCC');
}
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号