Avoid string break when the available horizontal space ends

Question

Avoid string break when the available horizontal space ends

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (-1 votes)

2

If you use a sequence of letters it does not break even if the horizontal space available in the container runs out, unless you use CSS properties to the effect such as: word-break and word- wrap , but if the sequence has characters like hyphens it breaks in these, distributing the sequence in several rows.

For example:

<div style="background:lightgrey;margin:50px;width:90px">
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

The first paragraph does not break, but in the case of the second, the line breaks after the first script. If I wanted it to be displayed:

Loremipsumdolor---> 
Lorem ipsum.

or like this:

Loremipsumdolor 
--->Lorem ipsum.

Is there any CSS property or HTML tag to achieve it?

Edited:

The best solution, for the time being, is to use the CSS property white-space: nowrap which is mentioned in the response of kleith . Although I found a but (failure in the first paragraph):

<div style="background:lightgrey;margin:50px;padding:20px;width:90px">
    <p><span style="white-space:nowrap">Loremipsumdolor---></span>Lorem ipsum.</p>
    <p><span style="white-space:nowrap">Loremipsumdolor---></span><i></i>Lorem ipsum.</p>
    <p><span style="white-space:nowrap">Loremipsumdolor---></span> Lorem ipsum.</p>
</div>

Although I close the <span> where the style is applied if the consecutive text is immediately attached to the group, it is affected by it and does not break, that's why it appears:

Loremipsumdolor--->Lorem 
ipsum.

One solution, if it must be stuck, is to add an empty inline element between this group closure and the consecutive text, for example <i> (second paragraph). Result:

Loremipsumdolor--->
Lorem ipsum.

And if there were blank spaces between the closing of the group and the rest of the characters, it breaks without problems and the group is kept on its line. Visually, the result is the same as the previous one.

html css

asked by Orici 01.01.2018 в 01:12

source

3 answers

validate number in input and at the same time format it in thousands How to consume a web service that returns a nameless jsonArray

score 0 · Answer 1

You can use the <br> tag, to break the sentence and make it a new line.

<div style="background:lightgrey;display: inline-block;">
  <p>LoremipsumdolorLoremipsum.</p>
  <p>Loremipsumdolor<br>---> Lorem ipsum.</p>
</div>

score 0 · Answer 2

If with the property of white-space: nowrap; , avoid all wrap .

<div style="background: lightgrey; margin: 50px; width: 90px; white-space: nowrap;">
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

score -1 · Answer 3

code:

 	div {
 background:lightgrey;
  width:60%;
  margin:10%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>titulo</title>
</head>
<body>
<div>
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>
</body>
</html>