Word wrap span text - Word и Excel - помощь в работе с программами

I want to create a span with a fixed width that when I type any thing in the span like <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, a long string of non-spaced text, the word(s) break or wrap to next line.

Any ideas?

asked Aug 14, 2013 at 7:07

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

answered Aug 14, 2013 at 7:10

Maxime LorantMaxime Lorant

33.9k19 gold badges86 silver badges96 bronze badges

Try following css with addition of white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal;
}

answered Dec 17, 2015 at 16:50

Gerard de VisserGerard de Visser

7,4429 gold badges48 silver badges58 bronze badges

Like this

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

answered Aug 14, 2013 at 7:09

Falguni PanchalFalguni Panchal

8,8533 gold badges26 silver badges33 bronze badges

By default a span is an inline element… so that’s not the default behavior.

You can make the span behave that way by adding display: block; to your CSS.

span {
    display: block;
    width: 100px;
}

answered Aug 14, 2013 at 7:10

Try this

span {
    display: block;
    width: 150px;
}

answered Aug 14, 2013 at 7:16

Eswara ReddyEswara Reddy

1,6071 gold badge18 silver badges28 bronze badges

Just to extend the pratical scope of the question and as an appendix to the given answers:
Sometimes one might find it necessary to specify the selectors a little bit more.

By defining the the full span as display:inline-block you might have a hard time displaying images.

Therefore I prefer to define a span like so:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

answered Mar 19, 2018 at 12:13

leopoldleopold

1,9711 gold badge19 silver badges22 bronze badges

In my case, display: block was breaking the design as intended.

The max-width property just saved me.

and for styling, you can use text-overflow: ellipsis as well.

my code was

max-width: 255px
overflow:hidden

answered Apr 5, 2019 at 10:18

sh6210sh6210

3,9861 gold badge36 silver badges26 bronze badges

Источник

Improve Article

Save Article

Like Article

Read

Discuss

Improve Article

Save Article

Like Article

In this article, we will see how to wrap long text/word in a fixed-width span. The word-wrap property in CSS is used to break long words and wrap them into the next line. It defines whether to break words when the content exceeds the boundaries of its container.

Syntax:

word-wrap: normal|break-word|initial|inherit;

Example 1: The following code demonstrates the “normal” value for the word-wrap property. The text is broken which is shown by a border.

HTML

<!DOCTYPE html>

<html>

<head>

<style>

div

{

word-wrap:normal;

width: 150px;

border: 1px solid black;

}

</style>

</head>

<body>

<h2 style="color:green">GeeksforGeeks</h2>

<div>

GeeksforGeeks:AComputerSciencePortalForGeeks

</div>

</body>

</html>

Output:

Example 2: The following code demonstrates the “break-word” value for the word-wrap property. The text is broken which is shown in the next line inside the bordered box as it exceeds the given width.

HTML

<!DOCTYPE html>

<html>

<head>

<style>

div

{

word-wrap:break-word;

width: 150px;

border:1px solid black;

}

</style>

</head>

<body>

<h2 style="color:green">GeeksforGeeks</h2>

<div>

GeeksforGeeks:AComputerSciencePortalForGeeks

</div>

</body>

</html>

Output:

Like Article

Save Article

Источник

You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.

In this snippet, you’ll find some examples for block elements, as well as for the inline ones.

In the example below, we set the word-wrap property to its «break-word» value for the <span> element and specify its width. Also, we set the display property to “inline-block”.

Example of wrapping a long string without a whitespace character for inline elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        width: 135px;
        word-wrap: break-word;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

Result

LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum

Example of wrapping a long string without a whitespace character for block elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 100px;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <textarea>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremI
    </textarea>
  </body>
</html>

Here too, we specified the word-wrap and width properties, but for the <textarea> element.

In CSS3, the word-wrap property is renamed to overflow-warp. So, consider this when choosing the solution.

Example of wrapping a long string without a whitespace character with the CSS overflow-wrap property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display:inline-block;
        width: 150px;
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

Источник

Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters.

Protecting Layout

Normally, text flows to the next line at “soft wrap opportunities”, which is a fancy name for spots you’d expect text to break naturally, like between words or after a hyphen. But sometimes you may find yourself with long spans of text that don’t have soft wrap opportunities, such as really long words or URLs. This can cause all sorts of layout issues. For example, the text may overflow its container, or it might force the container to become too wide and push things out of place.

It’s good defensive coding to anticipate issues from text not breaking. Fortunately, CSS gives us some tools for this.

Getting Overflowing Text to Wrap

Putting overflow-wrap: break-word on an element will allow text to break mid-word if needed. It’ll first try to keep a word unbroken by moving it to the next line, but will then break the word if there’s still not enough room.

See the Pen overflow-wrap: break-word by Will Boyd (@lonekorean) on CodePen.

There’s also overflow-wrap: anywhere, which breaks words in the same manner. The difference is in how it affects the min-content size calculation of the element it’s on. It’s pretty easy to see when width is set to min-content.

.top {
  width: min-content;
  overflow-wrap: break-word;
}.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

See the Pen overflow-wrap + min-content by Will Boyd (@lonekorean) on CodePen.

The top element with overflow-wrap: break-word calculates min-content as if no words are broken, so its width becomes the width of the longest word. The bottom element with overflow-wrap: anywhere calculates min-content with all the breaks it can create. Since a break can happen, well, anywhere, min-content ends up being the width of a single character.

Remember, this behavior only comes into play when min-content is involved. If we had set width to some rigid value, we’d see the same word-breaking result for both.

Breaking Words without Mercy

Another option for breaking words is word-break: break-all. This one won’t even try to keep words whole — it’ll just break them immediately. Take a look.

See the Pen word-break: break-all by Will Boyd (@lonekorean) on CodePen.

Notice how the long word isn’t moved to the next line, like it would have been when using overflow. Also notice how “words” is broken, even though it would have fit just fine on the next line.

word-break: break-all has no problem breaking words, but it’s still cautious around punctuation. For example, it’ll avoid starting a line with the period from the end of a sentence. If you want truly merciless breaking, even with punctuation, use line-break: anywhere.

See the Pen word-break: break-all vs line-break: anywhere by Will Boyd (@lonekorean) on CodePen.

See how word-break: break-all moves the “k” down to avoid starting the second line with “.”? Meanwhile, line-break: anywhere doesn’t care.

Excessive Punctuation

Let’s see how the CSS properties we’ve covered so far handle excessively long spans of punctuation.

See the Pen Excessive Punctuation by Will Boyd (@lonekorean) on CodePen.

overflow-wrap: break-word and line-break: anywhere are able to keep things contained, but then there’s word-break: break-all being weird with punctuation again — this time resulting in overflowing text.

It’s something to keep in mind. If you absolutely do not want text to overflow, be aware that word-break: break-all won’t stop runaway punctuation.

Specifying Where Words Can Break

For more control, you can manually insert word break opportunities into your text with <wbr>. You can also use a “zero-width space”, provided by the &ZeroWidthSpace; HTML entity (yes, it must be capitalized just as you see it!).

Let’s see these in action by wrapping a long URL that normally wouldn’t wrap, but only between segments.

  <!-- normal -->
  <p>https://subdomain.somewhere.co.uk</p>  <!-- <wbr> -->
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.uk</p>
  <!-- &ZeroWidthSpace; -->
  <p>https://subdomain&ZeroWidthSpace;.somewhere&ZeroWidthSpace;.co&ZeroWidthSpace;.uk</p>

See the Pen Manual Word Break Opportunities by Will Boyd (@lonekorean) on CodePen.

Automatic Hyphenation

You can tell the browser to break and hyphenate words where appropriate by using hyphens: auto. Hyphenation rules are determined by language, so you’ll need to tell the browser what language to use. This is done by specifying the lang attribute in HTML, possibly on the relevant element directly, or on <html>.

<p lang="en">This is just a bit of arbitrary text to show hyphenation in action.</p>

  p {
    -webkit-hyphens: auto; /* for Safari */
    hyphens: auto;
  }

See the Pen hyphens: auto by Will Boyd (@lonekorean) on CodePen.

Manual Hyphenation

You can also take matters into your own hands and insert a “soft hyphen” manually with the  HTML entity. It won’t be visible unless the browser decides to wrap there, in which case a hyphen will appear. Notice in the following demo how we’re using  twice, but we only see it once where the text wraps.

<p lang="en">Magic? Abraca&shy;dabra? Abraca&shy;dabra!</p>

See the Pen Soft Hyphen by Will Boyd (@lonekorean) on CodePen.

hyphens must be set to either auto or manual for  to display properly. Conveniently, the default is hyphens: manual, so you should be good without any additional CSS (unless something has declared hyphens: none for some reason).

Preventing Text from Wrapping

Let’s switch things up. There may be times when you don’t want text to wrap freely, so that you have better control over how your content is presented. There are a couple of tools to help you with this.

First up is white-space: nowrap. Put it on an element to prevent its text from wrapping naturally.

See the Pen white-space: nowrap by Will Boyd (@lonekorean) on CodePen.

Preformatting Text

There’s also white-space: pre, which will wrap text just as you have it typed in your HTML. Be careful though, as it will also preserve spaces from your HTML, so be mindful of your formatting. You can also use a <pre> tag to get the same results (it has white-space: pre on it by default).

<!-- the formatting of this HTML results in extra whitespace! -->
<p>
  What's worse, ignorance or apathy?
  I don't know and I don't care.
</p><!-- tighter formatting that "hugs" the text -->
<p>What's worse, ignorance or apathy?
I don't know and I don't care.</p>



  


                       
  



<!-- same as above, but using <pre> -->
<pre>What's worse, ignorance or apathy?
I don't know and I don't care.</pre>

p {
  white-space: pre;
}pre {
  /* <pre> sets font-family: monospace, but we can undo that */
  font-family: inherit;
}

See the Pen Preformatted Text by Will Boyd (@lonekorean) on CodePen.

A Break, Where Words Can’t Break?

For line breaks, you can use <br> inside of an element with white-space: nowrap or white-space: pre just fine. The text will wrap.

But what happens if you use <wbr> in such an element? Kind of a trick question… because browsers don’t agree. Chrome/Edge will recognize the <wbr> and potentially wrap, while Firefox/Safari won’t.

When it comes to the zero-width space (&ZeroWidthSpace;) though, browsers are consistent. None will wrap it with white-space: nowrap or white-space: pre.

<p>Darth Vader: Nooooooooooooo<br>oooo!</p><p>Darth Vader: Nooooooooooooo<wbr>oooo!</p>
<p>Darth Vader: Nooooooooooooo&ZeroWidthSpace;oooo!</p>

See the Pen white-space: nowrap + breaking lines by Will Boyd (@lonekorean) on CodePen.

Non-Breaking Spaces

Sometimes you may want text to wrap freely, except in very specific places. Good news! There are a few specialized HTML entities that let you do exactly this.

A “non-breaking space” ( ) is often used to keep space between words, but disallow a line break between them.

<p>Something I've noticed is designers don't seem to like orphans.</p><p>Something I've noticed is designers don't seem to like&nbsp;orphans.</p>

See the Pen Non-Breaking Space by Will Boyd (@lonekorean) on CodePen.

Word Joiners and Non-Breaking Hyphens

It’s possible for text to naturally wrap even without spaces, such as after a hyphen. To prevent wrapping without adding a space, you can use &NoBreak; (case-sensitive!) to get a “word joiner”. For hyphens specifically, you can get a “non-breaking hyphen” with ‑ (it doesn’t have a nice HTML entity name).

  <p>Turn right here to get on I-85.</p>  <p>Turn right here to get on I-&NoBreak;85.</p>
  <p>Turn right here to get on I‑85.</p>

See the Pen Word Joiners and Non-Breaking Hyphens by Will Boyd (@lonekorean) on CodePen.

CJK Text and Breaking Words

CJK (Chinese/Japanese/Korean) text behaves differently than non-CJK text in some ways. Certain CSS properties and values can be used for additional control over the wrapping of CJK text specifically.

Default browser behavior allows words to be broken in CJK text. This means that word-break: normal (the default) and word-break: break-all will give you the same results. However, you can use word-break: keep-all to prevent CJK text from wrapping within words (non-CJK text will be unaffected).

Here’s an example in Korean. Note how the word “자랑스럽게” does or doesn’t break.

See the Pen CJK Text + word-break by Will Boyd (@lonekorean) on CodePen.

Be careful though, Chinese and Japanese don’t use spaces between words like Korean does, so word-break: keep-all can easily cause long overflowing text if not otherwise handled.

CJK Text and Line Break Rules

We talked about line-break: anywhere earlier with non-CJK text and how it has no problem breaking at punctuation. The same is true with CJK text.

Here’s an example in Japanese. Note how “。” is or isn’t allowed to start a line.

See the Pen CJK Text + line-break by Will Boyd (@lonekorean) on CodePen.

There are other values for line-break that affect how CJK text wraps: loose, normal, and strict. These values instruct the browser on which rules to use when deciding where to insert line breaks. The W3C describes several rules and it’s possible for browsers to add their own rules as well.

Worth Mentioning: Element Overflow

The overflow CSS property isn’t specific to text, but is often used to ensure text doesn’t render outside of an element that has its width or height constrained.

.top {
  white-space: nowrap;
  overflow: auto;
}.bottom {
  white-space: nowrap;
  overflow: hidden;
}

See the Pen Element Overflow by Will Boyd (@lonekorean) on CodePen.

As you can see, a value of auto allows the content to be scrolled (auto only shows scrollbars when needed, scroll shows them always). A value of hidden simply cuts off the content and leaves it at that.

overflow is actually shorthand to set both overflow-x and overflow-y, for horizontal and vertical overflow respectively. Feel free to use what suits you best.

We can build upon overflow: hidden by adding text-overflow: ellipsis. Text will still be cut off, but we’ll get some nice ellipsis as an indication.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

See the Pen text-overflow: ellipsis by Will Boyd (@lonekorean) on CodePen.

Bonus Trick: Pseudo-Element Line Break

You can force a line break before and/or after an inline element, while keeping it as an inline element, with a little bit of pseudo-element trickery.

First, set the content of a ::before or ::after pseudo-element to 'A', which will give you the new line character. Then set white-space: pre to ensure the new line character is respected.

<p>Things that go <span>bump</span> in the night.</p>

span {
  background-color: #000;
}span::before, span::after {
  content: 'A';
  white-space: pre;
}

See the Pen Pseudo-Element Line Breaks by Will Boyd (@lonekorean) on CodePen.

We could have just put display: block on the <span> to get the same breaks, but then it would no longer be inline. The background-color makes it easy to see that with this method, we still have an inline element.

Bonus Notes

There’s an older CSS property named word-wrap. It’s non-standard and browsers now treat it as an alias for overflow-wrap.
The white-space CSS property has some other values we didn’t cover: pre-wrap, pre-line, and break-spaces. Unlike the ones we did cover, these don’t prevent text wrapping.
The CSS Text Module Level 4 spec describes a text-wrap CSS property that looks interesting, but at the time of writing, no browser implements it.

Time to “Wrap” Things Up

There’s so much that goes into flowing text on a web page. Most of the time you don’t really need to think about it, since browsers handle it for you. For the times when you do need more control, it’s nice to know that you have a lot of options.

Writing this was definitely a rabbit hole for me as I kept finding more and more things to talk about. I hope I’ve shown you enough to get your text to break and flow just the way you want it.

Thanks for reading!

Источник

How do you word-wrap a span?

You can use the CSS property word-wrap:break-word; , which will break words if they are too long for your span width. By default a span is an inline element… so that’s not the default behavior. You can make the span behave that way by adding display: block; to your CSS.

How do you make a span not wrap?

You can make the contents of HTML

, , and elements not to wrap by using some CSS. You need the white-space property. As we know, this property helps us to handle the spaces within the element.

How do you write span width?

The tag will need to be set to display:block as it is an inline element and will ignore width. Using HTML 5.0, it is possible to fix width of text block using or .

Can span element have width?

Span is an inline element. It has no width or height. You could turn it into a block-level element, then it will accept your dimension directives.

How do I force wrap a word using CSS3 Mcq?

7. How to force a word wrap using CSS3?

word-wrap: break-word;
text-wrap: break-word;
text-wrap: force;
text-width: set;

Can we write div inside span?

Answer 1 : span is an inline element, so having a div inside span is a bad idea, also, it would be better, if you nest span inside span and give inner span display:block property! First answer: You forgot the semi-colon after height style, that’s why it is not rendered.

How do you code height and width?

CSS height and width Examples

Set the height and width of a element: div { height: 200px; width: 50%;
Set the height and width of another element: div { height: 100px; width: 500px;
This element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;

How is the width and height of that element determined?

An inline element is an element that’s width and height are determined by the content it contains. Inline elements, such as a , will completely ignore the width and height as well the the top and bottom margin properties because, well, the content is what determines the dimensions.

How can I wrap my text to span over multiple lines?

Rather than having to define each line and its width text would be typed as paragraphs.

How to set max width on a span element?

The page you linked to uses a span element, which is an inline element by default. Inline elements cannot have width or height. If you want to set max width on a span element, set it’s display to block or inline-block: well there are no line breaks in the whole line “testing…testing” your page contains line breaks… please help…

Are there multiple spans in a cssword wrap?

EDIT for clarification: There should be multiple spans on each line, and wrapping should be between spans. cssword-wrap Share Improve this question Follow edited Nov 25 ’11 at 20:55

How to wrap the contents of a document?

Title of the document White-space property example Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text.

How do I keep my span from wrapping?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

How do you change the width of a span?

What does span span do?

The HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang .

How do I keep my div from wrapping?

5 Answers. You can use, white-space: nowrap; word-break: keep-all; To prevent word wrapping.

How do you prevent inline-block divs from wrapping?

Add white-space: nowrap; to your . layout style declaration. This will do exactly what you need: preventing the divs from wrapping.

Can we add width to span?

Remember height or width on spans cannot be changed unless you add the display: inline-block property. Spans and divs work in conjunction with other HTML elements to create the basic building blocks of your website. Spans can be styled separately from your divs to create emphasis.

Is there a way to wrap text in a span?

What you are saying is correct. By default span is wrapping text, but if there are white spaces inbetween. But for testing purpose there were no white spaces in my text so the text was not wrapping. But is there any way to break & wrap the text if the words are too long?

How to prevent wrapping of span or Div Stack Overflow?

If you only want the scroll bar to appear when necessary, you can use the “auto” option: I don’t think you should be using the “float” property with “overflow”, but I’d have to try out your example first. Looks like divs will not go outside of their body’s width. Even within another div.

How is the span tag used in JavaScript?

Definition and Usage. The tag is an inline container used to mark up a part of a text, or a part of a document. The tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The tag is much like the element, but is a block-level element and is an inline element.

Источник