Styjun

If a vampire drinks blood of a sick human, does the vampire get infected?

Why private jets such as GulfStream ones fly higher than other civil jets?

Does the length of a password for Wi-Fi affect speed?

How do I get the =LEFT function in excel, to also take the number zero as the first number?

What is it exactly about flying a Flyboard across the English channel that made Zapata's thighs burn?

…down the primrose path

Is space radiation a risk for space film photography, and how is this prevented?

Launch capabilities of GSLV Mark III

Will a research paper be retracted if the code (which was made publically available ) is shown have a flaw in the logic?

The meaning of "scale" in "because diversions scale so easily wealth becomes concentrated"

Best way to explain to my boss that I cannot attend a team summit because it is on Rosh Hashana or any other Jewish Holiday

Does a humanoid possessed by a ghost register as undead to a paladin's Divine Sense?

What are the function of EM and EN spaces?

Can you take actions after being healed at 0hp?

Why does capacitance not depend on the material of the plates?

Why is Chromosome 1 called Chromosome 1?

If the interviewer says "We have other interviews to conduct and then back to you in few days", is it a bad sign to not get the job?

Why am I not getting stuck in the loop

Why do dragons like shiny stuff?

Is there a way to prevent the production team from messing up my paper?

Is a switch from R to Python worth it?

Writing computer program code for free in an interview?

Write The Shortest Program To Check If A Binary Tree Is Balanced

Generate a random point outside a given rectangle within a map

Span element with width and line break before

Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?Click through div to underlying elementsCSS to line break before/after a particular `inline-block` itemhtml (+css): denoting a preferred place for a line breakHow to make an inline-block element fill the remainder of the line?How to vertical align an inline-block in a line of text?Add line break to ::after or ::before pseudo-element content

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

4

I am receiving content from an API that includes several span elements followed by unmarked text.

Example:

<span>1</span> Some text. <span>2</span> Some text.

I want the spans to have a set width and a line break before.

Example:

 1 Some text.

 2 Some text.

"display: block" on the spans allows the width property but also creates a break after each span.

"display: inline-block" allows for the width property but I cannot figure out how to create a line break before.

Leaving the spans as "display: inline" allows for the line break before each span (using ::before content). However, you cannot designate a width property for inline elements (as far as I have seen).

html css css3

share|improve this question

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure I see an actual question here. From what I can tell, option number three ("display: inline" does not allow the width property, but I can produce the break with psuedo before content.) accomplishes what you require. What exactly is the problem?
  
  – Alexander Nied
  Mar 27 at 3:59
  

  
  
  
  

add a comment | 

4

I am receiving content from an API that includes several span elements followed by unmarked text.

Example:

<span>1</span> Some text. <span>2</span> Some text.

I want the spans to have a set width and a line break before.

Example:

 1 Some text.

 2 Some text.

"display: block" on the spans allows the width property but also creates a break after each span.

"display: inline-block" allows for the width property but I cannot figure out how to create a line break before.

Leaving the spans as "display: inline" allows for the line break before each span (using ::before content). However, you cannot designate a width property for inline elements (as far as I have seen).

html css css3

share|improve this question

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure I see an actual question here. From what I can tell, option number three ("display: inline" does not allow the width property, but I can produce the break with psuedo before content.) accomplishes what you require. What exactly is the problem?
  
  – Alexander Nied
  Mar 27 at 3:59
  

  
  
  
  

add a comment | 

I am receiving content from an API that includes several span elements followed by unmarked text.

Example:

<span>1</span> Some text. <span>2</span> Some text.

I want the spans to have a set width and a line break before.

Example:

 1 Some text.

 2 Some text.

"display: block" on the spans allows the width property but also creates a break after each span.

"display: inline-block" allows for the width property but I cannot figure out how to create a line break before.

Leaving the spans as "display: inline" allows for the line break before each span (using ::before content). However, you cannot designate a width property for inline elements (as far as I have seen).

html css css3

share|improve this question

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

<span>1</span> Some text. <span>2</span> Some text.

 1 Some text.

 2 Some text.

share|improve this question

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

share|improve this question

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

edited Mar 27 at 8:51

Temani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

asked Mar 27 at 3:53

user7412419user7412419

8577 bronze badges

2 Answers
2

active

oldest

votes

0

If you have a wrapper for this content you can make it a grid container and easily achieve what you want:

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Another idea with flexbox and display:contents (https://caniuse.com/#feat=css-display-contents)

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Here is also another way using counter:

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

edited Mar 27 at 10:24

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

add a comment | 

5

To achieve expected result, use below option of content and white-space

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

codepen - https://codepen.io/nagasai/pen/RdmxrR

share|improve this answer

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369535%2fspan-element-with-width-and-line-break-before%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

If you have a wrapper for this content you can make it a grid container and easily achieve what you want:

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Another idea with flexbox and display:contents (https://caniuse.com/#feat=css-display-contents)

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Here is also another way using counter:

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

edited Mar 27 at 10:24

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

add a comment | 

0

If you have a wrapper for this content you can make it a grid container and easily achieve what you want:

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Another idea with flexbox and display:contents (https://caniuse.com/#feat=css-display-contents)

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Here is also another way using counter:

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

edited Mar 27 at 10:24

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

add a comment | 

If you have a wrapper for this content you can make it a grid container and easily achieve what you want:

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Another idea with flexbox and display:contents (https://caniuse.com/#feat=css-display-contents)

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

Here is also another way using counter:

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

edited Mar 27 at 10:24

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

.wrapper 
 display:grid;
 grid-template-columns:30px 1fr;


span 
 text-align:center;
 outline:1px solid green;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

.wrapper 
 display:flex;
 flex-wrap:wrap;
 padding-left:10px;


span 
 display:contents;
 outline:1px solid green;

/*create line break*/
span:before 
 content:"";
 flex-basis:100%;


/*control the width*/
span:after 
 content:"";
 width:20px;

<div class="wrapper">
<span>1</span> Some text. <span>2</span> Some text.
</div>

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

body 
 counter-reset: count;


span 
 counter-increment: count;
 font-size:0; /*remove default content*/

/*add line break*/
span::before 
 content: "A";
 white-space: pre;


/*add content with counter*/
span::after 
 content:counter(count);
 font-size:initial;
 display:inline-block;
 width:30px; /*control the width*/
 text-align:center;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

edited Mar 27 at 10:24

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

answered Mar 27 at 9:49

Temani AfifTemani Afif

98.4k1111 gold badges6161 silver badges109109 bronze badges

5

To achieve expected result, use below option of content and white-space

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

codepen - https://codepen.io/nagasai/pen/RdmxrR

share|improve this answer

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

add a comment | 

5

To achieve expected result, use below option of content and white-space

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

codepen - https://codepen.io/nagasai/pen/RdmxrR

share|improve this answer

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

add a comment | 

To achieve expected result, use below option of content and white-space

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

codepen - https://codepen.io/nagasai/pen/RdmxrR

share|improve this answer

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

span::before 
 content: "A";
 white-space: pre;

<span>1</span> Some text. <span>2</span> Some text.

share|improve this answer

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges

answered Mar 27 at 4:05

Naga Sai ANaga Sai A

8,06011 gold badge99 silver badges2828 bronze badges