Can I dynamically hide html characters based on the line wrap?

user_5186325 0
Viewed 1852

I have several data (say a name, an address, a telephone number, an e-mail address) in a row, because they occupy the thin footer of a webpage.

They are separated by a space-dash-space construct, like this (but centered):

Name - address - phone - mail address

On small screens, the whole page is smaller and the text wraps. I'm already making use of no-breaking spaces and word wraps to ensure that everything falls in place but the result is not satisfying.

What I get is:

Name - address -
  phone - mail

What I want is:

Name - address
 phone - mail

Is there any way, with CSS or JS, to dynamically hide some characters if they happen to be located at the start or at the end of a line?

If not, feel free to suggest different solutions that don't involve changing the original formatting of the text. Shall I find no solution, I will opt for:

- Name -- address -- phone -- mail -

turning into:

- Name -- address -
 - phone -- mail -

or something like that.

formatting css html javascript
5 Answers

Of course it is a bit late:) but I think the pure CSS solution may exists. Please see a code snipped below.

The point is that the list items (except the first one) have a negative margin on the left and the same positive margin on the right. As a result these margins annihilate being on the same line but provide a negative indent of second and further lines. And the container's "overflow: hidden;" hides the extra separators on the left. It is important here that the dividers have a fixed width.

ul {
  list-style: none;
  padding: 0;
  
  overflow: hidden;
}

li {
  display: inline;
  white-space: nowrap;
  margin-right: 0.66em;
  margin-left: -0.66em;
}

li::before {
  display: inline-block;
  content: "-";
  width: 0.66em;
}

li:first-child {
  margin-left: 0;
}

li:first-child::before {
  content: none;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
</ul>

user_14449820
Related