Question

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

我在线搜索了一个解决方案，但由于与我使用的关键字相关的大量噪音（即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>

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

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

Answer 1

你应该玩“显示”属性。如果您希望它的行为类似于<p>标记，则应使用display: block;。如果要保持元素的内联行为，则应使用display: inline-block;。然后他们会听你的宽度。

Answer 2

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

示例浮动左http://jsfiddle.net/0ja257L9/

.token_actor_cell{
    float: left;
}

或者你可以使用display：inline-block作为内联元素：）

Answer 3

怎么样：

<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>

似乎适合我。

覆盖span和b元素的宽度

3 个答案: