All geek questions in one place

HTML line text overflow before it is closed with the correct alignment content

I have text that appears on one line in a fixed-width container. If the text cannot be contained within the width of the container, the overflow is hidden. Any combination of three status icons can be displayed on the right side of the container. If any of these icons appears, I would like the text overflow to be hidden until the first icon appears, so the text does not appear hidden behind the icons.

How can I overflow text so that it does not flow under the icons (ideally, using only CSS and no need to resort to JavaScript)?

Below is an example of CSS and HTML from which I started (none of them are defined in concrete). Here is a live code example that also illustrates the desired result (note that it has a background image embedded in CSS using a data URI scheme , so it will not work in versions of Internet Explorer before 8).

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>
+3
source share
5 answers

You can use the background image directly in the div that contains the text, and use the registration to make room for the icons.

EDIT:

Here is a working example, but I could not get "nowrap" to work, so I cheated using height:

<!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>

, , , .

+1

, , .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>
+1

, . - .

, , 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 .

0

- , ( ), , ( , , ). , :

<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, . "" , divs . CSS3, .text div . CSS , .

, , div, , . HTML.

, , ( CSS). , , (, , div ); . , ...

0

( ), : , img, , , , , , . hover: , .. ( )

Also, if you use separate images with only one character (asterisk, circle, flag) and lay the images on the right with an opaque space to the width you want to cover, you will have something like this (I did everything possible to encode base64 images, but it only works in FF. CSS should work correctly with the corresponding linked images).

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');
}
0
source

Source: https://habr.com/ru/post/1711649/

More articles:


All Articles