0

I followed the solution for a HTML approach for a tooltip. My current sample code looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      sup.footnote::after {
        content: attr(data-count);
      }
      sup.footnote:hover {
        cursor: help;
        position: relative;
      }
      sup.footnote cite {
        display: none;
      }
      sup.footnote:hover cite {
        display: inline-block;
        position: absolute;
        top: 0px;
        left: -50%;
        width: 250px;
        background: #f0f0f0 no-repeat 100% 5%;
        border: #c0c0c0 1px dotted;
        border-radius: 8px;
        margin: 10px;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <p>
      Dies ist ein Beispiel für eine Fußnote in HTML
      <sup class="footnote" data-count="1">
        <cite>
          <span> [Sample span]</span>&nbsp;with some explanation:
          <a lang="en" href="http://test.gv.at/test.pdf">
            http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
          </a>
        </cite>
      </sup>
    </p>
  </body>
</html>

The problem that I'm facing is that I don't know how to restrict the anchor element with length. While FF breaks the anchor nicely Chrome has troubles to do so.

enter image description here

I found solutions like setting display for anchor but Chrome doesn't perform any kind of change. Perhaps I did it on the wrong elements or with the wrong style.

==> Is there a way to limit the length of the anchor to e.g. 250px?

isherwood
  • 58,414
  • 16
  • 114
  • 157
LeO
  • 4,238
  • 4
  • 48
  • 88
  • 3
    Either allow word breaking (`word-break` / `overflow-wrap`), or make the link inline-block, give it a (max) width, and hide any overflow. – CBroe Jun 22 '22 at 13:48
  • Setting the width won't work. `word-break` and/or `overflow-wrap` work both. Which to prefer or which choose? If you make an answer ==> I'll accept it. Thx. AND: Why does work in FF and Chrome not? (As another topic) – LeO Jun 22 '22 at 13:52
  • What does "limit the length" mean? Truncate? Wrap? Both have been well covered on SO. – isherwood Jun 22 '22 at 15:26

1 Answers1

2

It's because your text (link) has no spaces. It's like a huge word which needs to be handled in CSS. It's also a CSS meme btw.

css-is-awesome

Here are some solutions:

Solution 1

Just use word-break with value break-word or break-all.

sup.footnote cite a {
  word-break: break-word;
}


sup.footnote::after {
  content: attr(data-count);
}
sup.footnote:hover {
  cursor: help;
  position: relative;
}
sup.footnote cite {
  display: none;
}
sup.footnote:hover cite {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50%;
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
}
sup.footnote cite a {
  word-break: break-word;
}
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <cite>
      <span> [Sample span]</span>&nbsp;with some explanation:
      <a lang="en" href="http://test.gv.at/test.pdf">
        http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
      </a>
    </cite>
  </sup>
</p>

result

Solution 2

Or prevent word break use text-overflow if you want to keep the tooltip height. Like this:

sup.footnote::after {
  content: attr(data-count);
}
sup.footnote:hover {
  cursor: help;
  position: relative;
}
sup.footnote cite {
  display: none;
}
sup.footnote:hover cite {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50%;
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}
sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <cite>
      <span> [Sample span]</span>&nbsp;with some explanation:
      <a lang="en" href="http://test.gv.at/test.pdf">
        http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
      </a>
    </cite>
  </sup>
</p>

result2

Domske
  • 4,795
  • 2
  • 20
  • 35