f



replace br with space

There's a web site I've been asked to "fix".

On it are nice "buttons" some of which have two-line labels. The buttons 
are anchors with a nested span. To control where the new line occurs a 
br has been added eg.

   <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a>

The website is responsive and when the browser width is small enough the 
buttons change to horizontal bars. The bars are wide enough that any 
two-line labels do not need to be on two lines.

How can I get the br to be replaced by a space when the buttons change 
to bars?

Andrew Poulos
0
Andrew
11/16/2016 12:13:52 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

5 Replies
88 Views

Similar Articles

[PageSpeed] 50

Andrew Poulos wrote:

> On it are nice "buttons" some of which have two-line labels. The buttons
> are anchors with a nested span. To control where the new line occurs a
> br has been added eg.
> 
>    <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a>
> 
> The website is responsive and when the browser width is small enough the
> buttons change to horizontal bars. The bars are wide enough that any
> two-line labels do not need to be on two lines.
> 
> How can I get the br to be replaced by a space when the buttons change
> to bars?

I do not think this is possible with that markup as the line break only 
disappears if you format the “br” element “display: none”, with which all 
options of generating content before or after it are gone.

Change it to

  <a href="…"><span>…</span> <span>…</span></a>

and format the “span” elements “display: block” by default.  Alternatively, 
you can use “div” elements instead of “span” elements, which you format 
“display: inline” for the small version (they have “display: block” by user 
agent default).

If you can ascribe semantics to a part of the label, use the corresponding 
semantic element instead and, if necessary, format it “display: block” by 
default and “display: inline” for the small version.

<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a> pp.
<https://developer.mozilla.org/en-US/docs/Web/CSS/display> pp.

-- 
PointedEars
0
Thomas
11/16/2016 12:46:56 AM
On 16/11/2016 11:46 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On it are nice "buttons" some of which have two-line labels. The buttons
>> are anchors with a nested span. To control where the new line occurs a
>> br has been added eg.
>>
>>    <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a>
>>
>> The website is responsive and when the browser width is small enough the
>> buttons change to horizontal bars. The bars are wide enough that any
>> two-line labels do not need to be on two lines.
>>
>> How can I get the br to be replaced by a space when the buttons change
>> to bars?
>
> I do not think this is possible with that markup as the line break only
> disappears if you format the “br” element “display: none”, with which all
> options of generating content before or after it are gone.
>
> Change it to
>
>   <a href="…"><span>…</span> <span>…</span></a>
>
> and format the “span” elements “display: block” by default.  Alternatively,
> you can use “div” elements instead of “span” elements, which you format
> “display: inline” for the small version (they have “display: block” by user
> agent default).
>
> If you can ascribe semantics to a part of the label, use the corresponding
> semantic element instead and, if necessary, format it “display: block” by
> default and “display: inline” for the small version.
>
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a> pp.
> <https://developer.mozilla.org/en-US/docs/Web/CSS/display> pp.

Thanks. I changed it to multiple spans with display block/inline and it 
now "works" as expected.

Andrew Poulos
0
Andrew
11/16/2016 12:58:33 AM
Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> On it are nice "buttons" some of which have two-line labels. The buttons
>> are anchors with a nested span. To control where the new line occurs a
>> br has been added eg.
>> 
>>    <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a>
>> 
>> The website is responsive and when the browser width is small enough the
>> buttons change to horizontal bars. The bars are wide enough that any
>> two-line labels do not need to be on two lines.
>> 
>> How can I get the br to be replaced by a space when the buttons change
>> to bars?
> 
> I do not think this is possible with that markup as the line break only
> disappears if you format the “br” element “display: none”, with which all
> options of generating content before or after it are gone.

However, if this is not a problem for you, you can simply insert a space 
character before or after the “br” element, and format the “br” element 
“display: none” for the small version: the presentation will be as if the 
“br” element would not have been there in the first place, leaving the space 
character to separate the words.  I would prefer the space to be before the 
“br” element where it is less likely to interfere with the presentation; 
YMMV.


PointedEars 
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
0
Thomas
11/16/2016 1:10:00 AM
>The buttons 
are anchors with a nested span. To control where the new line occurs a 
br has been added eg. 
   <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a> 

You could give the buttons a set width (dependent on the screen width). Then the button text would wrap automatically, according to the button width, with no need for <br> or anything like it.
0
Ram
11/17/2016 6:35:12 PM
Ram Tobolski wrote:

> The buttons are anchors with a nested span. To control where the new line 
                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> occurs a br has been added eg.
  ^^^^^^
>    <a href="docs/note.pdf"><span>SWIMMING<br>PERMISSION NOTE</span></a>
> 
> You could give the buttons a set width (dependent on the screen width).
> Then the button text would wrap automatically, according to the button
> width, with no need for <br> or anything like it.

I have marked the relevant part for you.  (Use a fixed-width font.)


HTH

PointedEars
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>
0
Thomas
11/18/2016 2:22:42 AM
Reply: