Question

您好我有以下代码，

<html>
    <body>
        <style> 
            div {
                border: 2px solid #a1a1a1;
                padding: 10px 40px; 
                background: #dddddd;
                width: 300px;
                height : 300px;
            }
        </style>
        <div>
            <svg id="text">
                <text transform="rotate(127,128,64)" opacity="1" text-anchor="start" font-weight="regular" font-style="Normal" font-family="Segoe UI" font-size="12px" fill="#191919" y="68.25" x="128" id="caption">Revenue stackoverflow Revenue stackoverflow  </text>
            </svg>
        </div>
    </body>
</html>

文本的输出可以重叠出区域或重叠到下一个svg元素。所以我想显示文本是否与另一个元素重叠或者是否需要执行修剪操作。

示例：Revenue stackove ...

Answer 1

尝试使用css省略号，如下所示： -

 div {
                border: 2px solid #a1a1a1;
                padding: 10px 40px; 
                background: #dddddd;
                width: 300px;
                height : 300px;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis; 
            }

避免使用修剪重叠

1 个答案: