blocks|key|1734788|text|尝试在相同的块级元素(如div)+like+this上同时设置text-overflow属性和固定宽度|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1734789|<table+class=""+border="1">
++++<tr><td+colspan=3>…</td></tr>
++++<tr+class="">
++++++++<td><div+class="prose"+style="width:+90px">column+one</div></td>
++++++++<td><div+class="prose"+style="width:+20px">column+two</div></td>
++++++++<td><div+class="prose"+style="width:+90px">column+three</div></td>
++++</tr>
++++<tr><td+colspan=3>…</td></tr>
</table>|code-block|syntax|javascript|1734790|使用您的原始CSS：|1734791|.prose+{
++overflow:+hidden;
++white-space:+nowrap;
++-o-text-overflow:+ellipsis;
++-ms-text-overflow:+ellipsis;
++text-overflow:+ellipsis;
}|1734792|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/qKS8p/22/^0|C|3|V|D|H|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Try setting both the <code>text-overflow</code> property and the fixed width on the same block-level element (such as a <code>div</code>), <a href="http://jsfiddle.net/qKS8p/22/" rel="nofollow">like this</a>:</p>

<pre><code>&lt;table class="" border="1"&gt;
    &lt;tr&gt;&lt;td colspan=3&gt;…&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class=""&gt;
        &lt;td&gt;&lt;div class="prose" style="width: 90px"&gt;column one&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div class="prose" style="width: 20px"&gt;column two&lt;/div&gt;&lt;/td&gt;
        &lt;td&gt;&lt;div class="prose" style="width: 90px"&gt;column three&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan=3&gt;…&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>With your original CSS:</p>

<pre><code>.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
</code></pre>


blocks|key|1948281|text|这把小提琴很适合我：http://jsfiddle.net/wRruP/3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1948282|HTML|1948283|<div><span>column+one</span></div>
<div>column+two</div>
<div><p>column+three</p></div>|code-block|syntax|javascript|1948284|​###+CSS|1948285|div+{
++++overflow:+hidden;
++++white-space:+nowrap;
++++text-overflow:+ellipsis;
++++width:+40px;
}|1948286|似乎必须在限制文本宽度的块上设置text-overflow。<span>是一个内联元素，它没有真正的宽度，因此不能真正切断文本，并且当我嵌套一个<p>时，它没有继承该属性。|style|CODE|1948287|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wRruP/3/^0|A|S|0|0|0|0|0|0|G|D|U|6|20|3|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@$A|19|B|1A|Q|R]|$A|1B|B|1C|Q|R]|$A|1D|B|1E|Q|R]]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>This fiddle works for me: <a href="http://jsfiddle.net/wRruP/3/">http://jsfiddle.net/wRruP/3/</a></p>

<h3>HTML</h3>

<pre><code>&lt;div&gt;&lt;span&gt;column one&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;column two&lt;/div&gt;
&lt;div&gt;&lt;p&gt;column three&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>​### CSS</p>

<pre><code>div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 40px;
}
</code></pre>

<p>It seems like <code>text-overflow</code> has to be set on the block that's actually constraining the width of the text. <code>&lt;span&gt;</code> is an inline element that doesn't really have a width and thus can't really cut off text, and when I nested a <code>&lt;p&gt;</code>, it didn't inherit the property.</p>


blocks|key|1948463|text|示例中代码的问题是，如果内容超过20px，表格会自动放大并忽略设置的宽度20px。下面是一个有效的示例：http://jsfiddle.net/qKS8p/34/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1948464|我补充道：|1948465|span+{
++display:block;
++width:inherit;
}|code-block|syntax|javascript|1948466|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/qKS8p/34/^0|1G|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>The problem with the code in the example is that the tables automatically enlarge and ignore the set width of 20px if there's more content then 20px.
Here's an example that works: <a href="http://jsfiddle.net/qKS8p/34/" rel="noreferrer">http://jsfiddle.net/qKS8p/34/</a></p>

<p>I added:</p>

<pre><code>span {
  display:block;
  width:inherit;
}
</code></pre>


<p>I cannot get "text-overflow: ellipsis;" to work...
Maybe someone can give ma some help with that one :-)</p>

<p>Small example: 
<a href="http://jsfiddle.net/qKS8p/2/" rel="nofollow noreferrer">http://jsfiddle.net/qKS8p/2/</a></p>

<p>http markup: </p>

<pre><code>&lt;table class="" border="1"&gt;
    &lt;tr&gt;&lt;td colspan=3&gt;…&lt;/td&gt;&lt;/tr&gt;
    &lt;tr class=""&gt;
        &lt;td width="90"&gt;&lt;span class="prose"&gt;column one&lt;/span&gt;&lt;/td&gt;
        &lt;td width="20"&gt;&lt;span class="prose"&gt;column two&lt;/span&gt;&lt;/td&gt;
        &lt;td width="90"&gt;&lt;span class="prose"&gt;column three&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td colspan=3&gt;…&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>css style rules: </p>

<pre><code>.prose {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
</code></pre>

<p>I would expect "column two" to be chopped because of the td's width of 20px. I also tried different variants with divs, tds etc, but I cannot see any change. Note, that this does not work in any browser I checked. So there is certainly something I miss. </p>

<p>There are millions of pages out there about examples, browser differences and and and. But I cannot get this to work ! According to current information the simple text-overflow attribute is supported in all major browsers now. So I am looking for a pure css solution (not xul, not jquery plugin), since this <em>should</em> work. </p>

<p>Thanks, 
arkascha</p>


Can't get "text-overflow: ellipsis;" to work

我不能让“文本溢出:省略号；”工作...也许有人可以在这个问题上给妈妈一些帮助：小示例：http标记：<table class="" border="1">    <tr><td colspan=3>…</td></tr>    <tr class="">        <td width="90"><span cla...

问无法让"text-overflow: ellipsis;“工作
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让"text-overflow: ellipsis;“工作EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让"text-overflow: ellipsis;“工作
EN