覆盖span和b元素的宽度

I have a bolded text block where I'd like to control the size of. Unfortunately, it appears to be resisting every effort to constrain its (actual) size. My goal is to have it to do ellipsis on text overflow but that's not happening because it just extends off-screen. It does get properly cut off by the boundary of the parent but that doesn't look elegant.

我有一个粗体文本块,我想控制它的大小。不幸的是,它似乎抵制了限制其(实际)规模的所有努力。我的目标是让它对文本溢出进行省略,但这不会发生,因为它只是在屏幕外扩展。它确实被父母的边界切断了,但看起来并不优雅。

I have searched online for a solution but I don't see anything useful due to the immense amount of noise associated with the keywords I use (i.e. span, override width, b element, etc). I have made a sample code below to illustrate my problem (where span and b elements resist width overrides)

我在网上搜索了一个解决方案,但由于与我使用的关键字相关的大量噪音(即span,覆盖宽度,b元素等),我没有看到任何有用的东西。我在下面做了一个示例代码来说明我的问题(span和b元素抵抗宽度覆盖)

<body>
<b class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
    /* width: 100px; */
    padding: 1px;
    margin: 1px;
    color: brown;
    max-width: 100px;
    word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</b>
<span class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
    /* width: 100px; */
    padding: 1px;
    margin: 1px;
    color: blue;
    max-width: 100px;
    word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span>
<p class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
    /* width: 100px; */
    padding: 1px;
    margin: 1px;
    color: green;
    max-width: 100px;
    word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</body>

I suppose I can change my element type to p but I kinda prefer to stick with my original element type if possible.

我想我可以将我的元素类型更改为p,但如果可能的话,我更喜欢坚持使用原始元素类型。

Input on this would be appreciated. I am pretty sure it is a well-understood issue.

对此的意见将不胜感激。我很确定这是一个众所周知的问题。

3 个解决方案

#1

You should play around with the "display" property. If you want it to behave like a <p> Tag you should use display: block;. If you want to keep the inline behaviour of your elements you should use display: inline-block;. Then they will listen to your width.

你应该玩“显示”属性。如果你希望它的行为类似于

标签,你应该使用display:block;。如果要保持元素的内联行为,则应使用display:inline-block;。然后他们会听你的宽度。

#2

By default inline elements (like span and b) don't have width. To make them adjust to a width you need them to float either left or right. This will create a block box around them.

默认情况下,内联元素(如span和b)没有宽度。要使它们适应宽度,您需要它们向左或向右浮动。这将在它们周围创建一个块框。

You example with float left http://jsfiddle.net/0ja257L9/

你举浮的例子http://jsfiddle.net/0ja257L9/

.token_actor_cell{
    float: left;
}

Or you can use display: inline-block for the inline elements :)

或者您可以使用display:inline-block作为内联元素:)

#3

What about:

<b class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
width: 100px; 
padding: 1px;
margin: 1px;
color: brown;
display:block;
text-overflow: ellipsis;
overflow:hidden"> 
(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</b>

Seems to work for me.

似乎适合我。

#1