Question

如何在t恤设计插件中限制区域文本功能“添加文字”。

Code:

<div class="content-inner">

<span class="drag-item ui-draggable ui-resizable drag-item-selected ui-draggable-disabled ui-state-disabled" id="item-0" style="left: 2px; top: 30px; width: 1206px; word-wrap: break-word; height: 27px; z-index: 1; transform: rotate(0rad); border: 1px dashed rgb(68, 68, 68);" aria-disabled="true">

<svg width="1206" height="27" viewBox="-0.046875 0 1206 27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="0.4042886124895173">
<text fill="#CCCCCC" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="50" y="21" text-anchor="middle" font-size="24px" font-family="arial">

<tspan dy="0" x="50%">gfadsfdasfdsfdsfasfdafasdfadsfadsdsfdsfdsfadsafacdfsdfdsfdsffdsafdsfds</tspan>

</text>
</g>

</svg>
<div class="item-remove-on glyphicons bin" title="Click to remove this item" onclick="design.item.remove(this)"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: block;"></div>
<div class="ui-rotatable-handle item-rotate-on glyphicons restart ui-draggable"></div>
</span>
</div>

我尝试了这些代码css，但它没有用。

word-wrap: break-word;
word-break: break-all;
width: 100px;
white-space: nowrap;

Answer 1

这不能在CSS中完成。但这里有一些选择：

如果您尝试限制单词中的字符数，可以使用JavaScript字符计数器（以及某些服务器端验证）。

如果您尝试将行数限制为单行，则必须将所有空格更改为不间断空格（HTML实体为 ）。这将确保单词在一行中粘在一起。然后，短语可能如下所示：Hello world!

如何限制<div>中<tspan>中的文本宽度

1 个答案: