blocks|key|3223992|text|你不能把CSS中的每个单词都作为目标。但是，如果使用一点jQuery，您可能可以做到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3223993|使用jQuery，您可以将每个单词包装在一个跨度中，然后CSS将<span>设置为display:block，这将把它放在自己的行上。|offset|length|style|CODE|3223994|当然是理论上的:P|3223995|entityMap^0|0|W|6|15|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>You can't target each word in CSS. However, with a bit of jQuery you probably could.</p>

<p>With jQuery you can wrap each word in a <code>&lt;span&gt;</code> and then CSS set span to <code>display:block</code> which would put it on its own line.</p>

<p>In theory of course :P</p>


blocks|key|291439|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|291440|.one-word-per-line+{
++++word-spacing:+<parent-width>;+
}

.your-classname{
++++width:+min-intrinsic;
++++width:+-webkit-min-content;
++++width:+-moz-min-content;
++++width:+min-content;
++++display:+table-caption;
++++display:+-ms-grid;
++++-ms-grid-columns:+min-content;
}|code-block|syntax|javascript|291441|其中<parent-width>是父元素的宽度(或不适合一行的任意高值)。这样你就可以确定在一个字母之后甚至会有一个换行符。支持Chrome/FF/Opera/IE7%2B+(甚至可能是IE6，因为它也支持单词间距)。|offset|length|style|CODE|291442|entityMap^0|0|0|2|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use</p>

<pre class="lang-css prettyprint-override"><code>.one-word-per-line {
    word-spacing: &lt;parent-width&gt;; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}
</code></pre>

<p>where <code>&lt;parent-width&gt;</code> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).</p>


blocks|key|288711|text|尝试使用white-space:+pre-line;。它在代码中出现换行符的地方创建换行符，但忽略额外的空格(制表符和空格等)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288712|首先，在代码中将单词写在单独的行中：|288713|<div>Short
Word</div>|code-block|syntax|javascript|288714|然后将样式应用于包含单词的元素。|288715|div+{+white-space:+pre-line;+}|288716|要小心，但是，在元素内部的代码中的每一个换行都会造成换行。因此，编写以下代码将导致在第一个单词之前和最后一个单词之后出现额外的换行符：|BOLD|288717|<div>
++++Short
++++Word
</div>|288718|在CSS+Tricks上有一篇很棒的文章解释了其他空格属性。|288719|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/almanac/properties/w/whitespace/^0|4|M|0|0|0|0|0|0|3|0|0|1|A|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@$9|1D|A|1E|B|S]]|D|@]|E|$]]|$1|T|3|U|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|V|3|W|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|X|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>Try using <code>white-space: pre-line;</code>. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).</p>

<p>First, write your words on separate lines in your code: </p>

<pre><code>&lt;div&gt;Short
Word&lt;/div&gt;
</code></pre>

<p>Then apply the style to the element containing the words.</p>

<pre><code>div { white-space: pre-line; }
</code></pre>

<p><strong>Be careful</strong> though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:</p>

<pre><code>&lt;div&gt;
    Short
    Word
&lt;/div&gt;
</code></pre>

<p>There's a great article on <a href="http://css-tricks.com/almanac/properties/w/whitespace/" rel="noreferrer">CSS Tricks</a> explaining the other white-space attributes.</p>


blocks|key|288721|text|@HursVanBloob给出的答案只适用于固定宽度的父容器，但在流体宽度容器的情况下会失败。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|288722|我尝试了很多属性，但都没有像预期的那样工作。最后，我得出了一个结论:赋予word-spacing+一个非常大的值效果非常好。|CODE|288723|p+{+word-spacing:+9999999px;+}|code-block|syntax|javascript|288724|或者，对于现代浏览器，您可以使用CSS+vw单位(视觉宽度占屏幕尺寸的%25)。|288725|p+{+word-spacing:+100vw;+}|288726|entityMap^0|17|4|0|0|1C|1D|D|10|C|0|0|0|12|K|2|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$]]

<p>The answer given by @HursVanBloob works only with fixed width parent container, but <strong>fails in case of fluid-width containers</strong>.</p>

<p>I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving <strong><code>word-spacing</code> a very huge value</strong> works perfectly fine.</p>

<pre><code>p { word-spacing: 9999999px; }
</code></pre>

<p>or, for the modern browsers you can use the CSS <code>vw</code> unit (visual width in % of the screen size).</p>

<pre><code>p { word-spacing: 100vw; }
</code></pre>


blocks|key|291473|text|通过将display:table-caption;应用于元素，在Separate+sentence+to+one+word+per+line上描述了另一种解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291474|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/18184881/separate-sentence-to-one-word-per-line^0|3|M|W|12|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>An alternative solution is described on <a href="https://stackoverflow.com/questions/18184881/separate-sentence-to-one-word-per-line">Separate sentence to one word per line</a>, by applying <code>display:table-caption;</code> to the element</p>


blocks|key|290641|text|https://jsfiddle.net/bm3Lfcod/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|290642|对于那些寻求在灵活的父容器中工作的解决方案的人来说，子容器在两个维度上都是灵活的。例如：导航栏按钮。|290643|//the+parent+(example+of+what+it+may+be)
div+{
++display:flex;
++width:+100%25;
}

//The+children
a+{
++display:+inline-block;
}

//text+wrapper
span+{
++display:+table-caption;
}|code-block|syntax|javascript|290644|entityMap|0|LINK|mutability|MUTABLE|url^0|0|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|4]]]]

<p><a href="https://jsfiddle.net/bm3Lfcod/1/" rel="nofollow noreferrer">https://jsfiddle.net/bm3Lfcod/1/</a></p>

<p>For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.</p>

<pre><code>//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}
</code></pre>


blocks|key|290646|text|如果你想从不同的解决方案中选择，除了给定的答案之外...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|290647|另一种方法是将容器的宽度设置为0，并确保溢出可见。然后，每个单词都会溢出，并出现在自己的行上。|290648|​|290649|div+{
++width:+0;
++overflow:+visible;
}|code-block|syntax|javascript|290650|<div>Short+Word</div>
<hr>
<div>Gargantuan+Word</div>|290651|290652|或者，您可以使用这些新提出的width值中的一个，前提是这些值在您阅读本文时仍然存在。|offset|length|style|CODE|290653|290654|div+{
++width:+min-intrinsic;+++++++/*+old+Chrome,+Safari+*/
++width:+-webkit-min-content;+/*+less+old+Chrome,+Safari+*/
++width:+-moz-min-content;++++/*+current+Firefox+*/
++width:+min-content;+++++++++/*+current+Chrome,+Safari;+not+IE+or+Edge+*/
}|290655|<div>Short+Word</div>
<hr>
<div>Gargantuan+Word</div>|290656|290657|entityMap^0|0|0|0|0|0|0|E|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@$P|18|Q|19|R|S]]|9|@]|A|$]]|$1|T|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|1B|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|H|7|1C|8|@]|9|@]|A|$I|J]]|$1|Y|3|E|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|10|$]]

<p>If you want to be able to choose from different solutions, in addition to the given answers...</p>

<p>An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 0;
  overflow: visible;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Short Word&lt;/div&gt;
&lt;hr&gt;
&lt;div&gt;Gargantuan Word&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Or you can use one of those newly proposed <code>width</code> values, provided those still exist by the time you read this.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Short Word&lt;/div&gt;
&lt;hr&gt;
&lt;div&gt;Gargantuan Word&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3010196|text|我遇到了同样的问题，这里的选择都没有帮助到我。某些邮件服务不支持指定的样式。这是我的版本，它解决了这个问题，并且在我检查过的任何地方都可以工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3010197|<table>
++++<tr>
++++++++<td+width="1">Gargantuan+Word</td>
++++</tr>
</table>|code-block|syntax|javascript|3010198|或者使用CSS：|3010199|<table>
++++<tr>
++++++++<td+style="width:1px">Gargantuan+Word</td>
++++</tr>
</table>|3010200|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles.
Here is my version, which solved the problem and works everywhere I checked:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td width="1"&gt;Gargantuan Word&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>OR using CSS:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td style="width:1px"&gt;Gargantuan Word&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


blocks|key|3224177|text|最好的解决方案是word-spacing属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3224178|将<p>添加到具有特定大小的容器中(例如300px)，然后必须在单词间距中添加该大小作为值。|3224179|HTML|3224180|<div>
+<p>Sentence+Here</p>
</div>|code-block|syntax|javascript|3224181|CSS|3224182|div+{
+width:+300px;
}

p+{
+width:+auto;
+text-align:+center;
+word-spacing:+300px;
}|3224183|这样，你的句子将总是被打断并设置在一列中，但段落的with将是动态的。|3224184|此处是+Codepen示例|BOLD|3224185|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/coswise/pen/vomvBR^0|8|C|0|1|3|K|5|0|0|0|0|0|0|0|3|4|7|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1F|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|1H|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1I|8|@$9|1J|A|1K|B|W]]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|X|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>The best solution is the <code>word-spacing</code> property. </p>

<p>Add the <code>&lt;p&gt;</code> in a container with a specific size (example <code>300px</code>) and after you have to add that size as the value in the word-spacing.</p>

<p>HTML</p>

<pre><code>&lt;div&gt;
 &lt;p&gt;Sentence Here&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}
</code></pre>

<p>In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.</p>

<p><strong><em>Here an example</em></strong> <a href="https://codepen.io/coswise/pen/vomvBR" rel="nofollow noreferrer">Codepen</a></p>


blocks|key|3010281|text|在我的情况下，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3010282|++++word-break:+break-all;|code-block|syntax|javascript|3010283|工作完美，希望它能帮助任何像我一样的新手。|3010284|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In my case,</p>

<pre><code>    word-break: break-all;
</code></pre>

<p>worked perfecly, hope it helps any other newcomer like me.</p>


blocks|key|291522|text|我将尝试解释一下：<span>是一个内联元素，我添加了一个内联块来为元素max-+width+:+min-content提供宽度；min-content是文本/语义中最小单词的值/宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|291523|编辑:如果你使用min-content，"width“将是你最长的单词。在本例中，example是较长的单词。|291524|但是如果你有不同的单词，比如"and+if“，或者只有2/3的字符，那么这两个单词可以放在同一行。|291525|如果你想保持on+word的行为，你可以给出一个固定的宽度，例如5px。|291526|带示例的代码笔：https://codepen.io/claudiuu/pen/WNpBNNQ|291527|​|291528|.wrapWord+{
++display:+inline-block;
++max-width:+min-content;
}|code-block|syntax|javascript|291529|<div>
++<span+class="wrapWord">
+++Example+Word
++</span>
</div>|291530|291531|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/claudiuu/pen/WNpBNNQ^0|9|6|0|0|0|0|8|13|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|N|3|O|5|6|7|1F|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1G|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|R|7|1H|8|@]|D|@]|E|$S|T]]|$1|W|3|O|5|6|7|1I|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>I will try to explain: <code>&lt;span&gt;</code> is a inline element and I'm adding a inline-block to give a width to the element max-width: min-content; min-content is the value/width of the smallest word in our text/sentance.</p>
<p>Edit: if you use min-content the &quot;width&quot; will be your longest word. In this case example is our longer word.</p>
<p>But if you have different words like &quot;and if&quot; or few 2/3 char words then this words will fit on the same line.</p>
<p>If you want to keep the on word behavior you can give a fix width for example 5px.</p>
<p>code pen with examples: <a href="https://codepen.io/claudiuu/pen/WNpBNNQ" rel="nofollow noreferrer">https://codepen.io/claudiuu/pen/WNpBNNQ</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapWord {
  display: inline-block;
  max-width: min-content;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;span class="wrapWord"&gt;
   Example Word
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm building a multilingual site, with the owner helping me with some translations.  Some of the displayed phrases need line breaks to maintain the style of the site.  </p>

<p>Unfortunately, the owner isn't a computer guy, so if he sees <code>foo&lt;br /&gt;bar</code> there's the chance he'll modify the data somehow as he's translating.</p>

<p>Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?</p>

<p>(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)   </p>

<p><strong>EDIT</strong></p>

<p>I'll attempt to diagram what's happening:</p>

<pre><code>----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------
</code></pre>

<p>The long word breaks automatically, the short word doesn't.  I want it to look like this:</p>

<pre><code>----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------
</code></pre>


Can CSS force a line break after each word in an element?

容器

jQuery

我正在建立一个多语种的网站，与所有者帮助我一些翻译。一些显示的短语需要换行符来保持网站的风格。不幸的是，所有者不是一个计算机爱好者，所以如果他看到foo<br />bar，他就有可能在翻译时以某种方式修改数据。有没有一种CSS解决方案(除了改变宽度)应用于在每个单词后都会断开的元素？(我知道我可以在PHP中做到这一点，...

问CSS可以在元素中的每个单词后强制换行吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS可以在元素中的每个单词后强制换行吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS可以在元素中的每个单词后强制换行吗？
EN