Forcing items to stay on same line - html

This should be fairly simple, but I have not been able to find anything usefull when google-ing.
What I have is some text and some icons that I want to ensure that stays on the same line. For example I want this:
Text goes here and eventually we run into the end of the line [text][icon]
or this:
Text goes here and eventually we run into the end of the line
[text][icon]
but not this:
Text goes here and eventually we run into the end of the line [text]
[icon]
The only thing I've been able to come up with when google-ing is that apparently IE has some problems implementing this. I don't really care if IE is able to do it or not (at least not yet), I just want to find a solution... :)

Put it in a container with no-wrap specified for the whitespace property in the stylesheet.

You need to use non-breaking spaces, coded to prevent breaks in the spaces between.

Consider using the non-breaking space instead of space between the last word(s) and the icon.
For example:
Text goes here and eventually we run into the end of the line [text] [icon]
instead of
Text goes here and eventually we run into the end of the line [text] [icon]

Related

HTML tag or technique like <wbr> but for a line break?

I often find I wish to control how a sentence breaks/wraps, e.g.:
Hello there Mr Nemesis X, welcome to the interwebs!
If the viewport is narrow, I would like it to wrap after the comma, so the two logical lines are together:
i.e. GOOD: Only if the viewport is too narrow to show the whole screen
Hello there Mr Nemesis X, |<----- viewport width
welcome to the interwebs!
BAD:
Hello there Mr Nemesis X, welcome to the |<----- viewport width
interwebs!
At the moment I place the two sentences in two <span>s, and use flex to ensure they wrap together, what a mission for something I often do. I learnt about <wbr>, which sounds like it could work if I replace all the spaces with say , but its not what it was defined for. Theres <br>, but that always breaks. So I am looking for something like a "line break", say <lbr> (doesnt exist), which if the line needs to wrap, it says hey, heres a good place to break the line.
You maybe can use \n after the coma.
The way your code is breaking right now is accurate to a break. The <wbr> is used to break a long word up hence why you would need to add that HTML entity to break up your lines.
For what I think you want, going for that specific design aesthetic, breaking at a comma, you would need to pre-process your strings before they get written, and as the view-port updates as to add breaks where you deem necessary.
You can use a <br> html tag to break a line!
Inserting the line break tag after the comma.
Or you can use the /n after the comma.

Close tags dropping below highlighted line

I have minimal experience with HTML script so this may all go horribly wrong here.
Alright so I have a very simple yet very time consuming task of taking complete papers and converting them into HTML script. I'm using Sublime Text 3 with Emmet plugin.
Basically,
This is the first header
This is the first paragraph that needs to be tagged
This is the second header
This is the second paragraph that needs to be tagged
So super simple I need to put header tags on the headers and paragraph tags on the paragraphs.
What I have been doing is holding Ctrl and manually highlighting the desired text as it is all rather random. Problem is that takes forever to manually highlight the text like that.
I am aware of other ways to highlight such as Ctrl + L for the line. Problem is my close tags end up under the highlighted line.
Example:
<h2>This is the first header
</h2><p>This is the first paragraph that needs to be tagged
</p>
It's not a big deal but it makes the code harder to go through later and really chaotic.
The same problem persists if I click the corresponding number of the line.
Seeing as I have hundreds of pages to enter and even more headers, paragraphs, and pictures to properly tag; I'm looking for a solution to the tag dropping below the line or a faster method to entering text.
So, is there a fast method for entering text from a word document to Sublime text and quickly get the corresponding tags? e.g. <h2>,<h3>,<p>,<ul>,<li> and so on.
Any help will save my sanity, thanks.
When you select a line with CtrlL, it automatically selects the entire line, and moves the cursor down to the first position on the following line. There are two ways around this. The first is to place the cursor in the first position on the line you want to select, then just hit ShiftEnd and the line will be selected, with the cursor now sitting in the last position on that same line. Alternatively, use CtrlL, then hit Shift← (left arrow) to move the cursor from the first position on the next line to the last position on the selected line. Either way, you can now hit the key combo in Emmet for inserting a tag pair, and you're all set.

Word Wrapping -- Possible to highlight just one horizontal line of many?

I like automatically highlighting the line of code that I'm working on, but the current setting highlights the entire wrapped line -- sometimes extending several horizontal lines on the page.
// If enabled, will highlight any line with a caret
"highlight_line": true,
Is there any way to just highlight one horizontal line of text, even though the wrapped line might consist of several horizontal lines of code?
This is not possible with Sublime Text 2. The nightly build of Emacs / Aquamacs, however, does offer this feature.

CSS - How to break a line only at division borders

I have the following code
http://jsfiddle.net/yXwh9/3/
and the result is
http://jsfiddle.net/yXwh9/3/embedded/result/
The problem is that the first line is broken and "Techconnect is a group where we discuss about " comes in first line and "technology,languages,platform,development and IDE and front end development".
On the second line, I don't want this to happen. I want the line to break up exactly at the right boundary of the containing division. (I dont want <pre> as a solution, just because the text may not contain <br/> inside.)
You are probably looking for text-align: justify. Example.

Best practices: displaying text that was input via multi-line text box

I have a multi-line text box. When users simply type away, the text box wraps the text, and it's saved as a single line. It's also possible that users may enter line breaks, for example when entering a "bulleted" lists like:
Here are some suggestions:
- fix this
- remove that
- and another thing
Now, the problem occurs when I try to display the value of this field. In order to preserve the formatting, I currently wrap the presentation in <pre> - this works to preserve user-supplied breaks, but when there's a lot of text saved as a single line, it displays the whole text block as single line, resulting in horizontal scrolling being needed to see everything.
Is there a graceful way to handle both of these cases?
The easiest way of dealing with this is turning all line breaks \n into <br> line breaks. In PHP for example, this is done using the nl2br() function.
If you want something a bit more fancy - like the list you quote getting converted into an actual HTML <ul> for example - you could consider a simple "language" like Markdown that SO uses. It comes with natural, simple rules like
# Heading 1
## Heading 2
### Heading 3
* Unordered List item
* Unordered List item
1. Numbered List item
2. Numbered List item
etc....
You can use the php function nl2br() It transforms line breaks into elements
Convert newline characters to <br /> tags explicitly, and let the browser word-wrap the text normally. That preserves the breaks the visitor entered, without harming other paragraphs.
You could replace line breaks with HTML line breaks.
Replace "\r\n" or "\n" (depending on the browser and platform, check first for longer one) with <br/>.
I would normally replace all CR/LF with LF, and then replace all LF with <br />. You can then render this text inside any HTML container you want and let it flow naturally.