A simple way to insert "span" into a text

Hi there,

in BSS it is not very easy to put a “span” in an existing text (see this request).

My idea: Why not insert “span” as easy as “strong” or “em” - you mark the desired words and click a symbol in the text editor area.


You don’t necessarily need to wrap your text in a span just because you want it to be bold, italic or underlined. You can just highlight the text and click the “B”, “I”, “u̱” buttons in the top menu of the work area, and they will wrap the HTML in the <strong></strong> <em></em> etc… tags.

I generally only use spans when I need to change something unusual like the color, the font, or the letter-spacing or font size, etc.

That’s right - I don’t want to use “span” as a substitute for “strong” or “em” either. Maybe I expressed myself in a misleading way.

I meant I would like to have a buton for “span” that works like the buttons for “strong” or “em”. Maybe like this:

I use “span” often for “text-nowrap”.

Did you look at what the other buttons do. If you select a word and click the B button, that word will get an invisible custom code block in the overview panel and in the
HTML panel you can see <strong> Your selected word </strong> without any options or attributes only editable from the menu bar when you edit your text.

If the developers add an S button for span the same thing will happen your selected word will get an invisible custom code block <span> your selected word </span> without any options or attributes.

If you want control and options on your text then it is to drag and drop a compatible component into your text which will be visible in the overview panel with all the options the component has.

It can not be that difficult to drop a span or other compatible component into your text

Yes, I understand. A </span> without an attribute doesn’t make sense, and the way I had it figured, I couldn’t assign an attribute.

I still find the current approach a bit cumbersome - perhaps because I’m spoiled by Notepad++ when it comes to formatting text. But of course I appreciate and enjoy the advantages of BSS that Notepad++ cannot offer.

I’m confused. There is already a text-nowrap option in the options panel.

I think what you’re saying you want to have the ability to put a span into a paragraph, and then set the contents of the span to text-nowrap.

A simpler solution is to just use non-breaking spaces (shift+space) between the words you don’t want to “wrap.” I do this all the time with phone numbers, for example (222) 222-2222. I would use a non-breaking space between the ) and the 2, and then a non-breaking hyphen to ensure that the phone number would never split apart, regardless of the width of the containing div.

The text-nowrap in the options pane (which I hadn’t noticed before) unfortunately affects the entire element, not a few selected words. Thus it is not usable for me.

I used to use the &nbsp; a lot, too - until we noticed at some point that the Chrome browser displayed this protected space wider than normal spaces. Since then I got used to text-nowrap, with which there are no display problems.

Strange. I’ve not seen any such change in width on my Windows 7 machine running the latest version of Chrome, or in Firefox, or in either browser on my Android. The difference in width must be very subtle, unless perhaps you’re using a font that doesn’t work well with the &nbsp; (some don’t.) I know the non-breaking hyphen is not as wide as the normal hyphen, but it’s a trivial difference, and the average layperson does not notice.

I’d be very interested in seeing a screenshot of the width difference to which you’re referring. Have you checked to see if it exists in other desktop or mobile browsers like Opera or Safari?

I’ve yet to see a website rendered exactly the same in two different browsers, and sometimes even in the same browser on different O.S.s you’ll see slight differences (eg. Chrome on Mac vs Chrome on Windows vs Chrome on iOS.) Consistency has been the bane of web developers since the beginning, but it really boils down to the UX. Is a slightly wider space really going to affect the user’s ability to use the website, or find the info they need, etc? Most of us who do web development, programming or just work with computers tend to suffer from perfectionism, but over the years I’ve come to realize that most things just need to be “good enough” and not necessarily perfect.

We had the problems exclusively with Chrome at that time, not in other browsers. In the meantime, however, the problem no longer seems to exist, I can’t reproduce it.

The protected space was then about as wide as two normal spaces in a row. You didn’t have to be a perfectionist to find that quite awful, it just interfered with reading.

Before this problem occurred (it must have been three or four years ago), I always used a protected space. Maybe I can get back into the habit now. :slightly_smiling_face:

I agree that being able to insert a span mid-text would be useful

You CAN drop a span into any place you want in a <p> or <h> element. Dragging and dropping is one way. Keyboard shortcuts is another. I don’t see there being that big of a difference between dragging a <span> element into where you want it in the text vs clicking the spot in the text and then clicking an “insert span” button. It’s virtually the same amount of work. The reason it was so cumbersome for the OP is because they were doing everything through right mouse button clicks. Keyboard shortcuts make the operation almost instantaneous. And being able to drag and drop the <span> component also allows you the freedom to add it via the overview panel.

I see no problem here that needs solving. Just some learning to be done.

This is wrong, see this post.

I wrote: “I only used the right mouse button for screen capture so you can see what I’m doing.”

So noted. Forgive me, my memory is not what it used to be.

Everything is fine, no problem. :slightly_smiling_face: