Fatal编程技术网

Javascript 使用修剪避免重叠

javascript html svg

Javascript 使用修剪避免重叠,javascript,html,svg,Javascript,Html,Svg,嗨，我有以下代码 <html> <body> <style> div { border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px; height

嗨，我有以下代码

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


div{
边框：2px实心#A1A1；
填充：10px 40px；
背景：#dddddd；
宽度：300px；
高度：300px；
}
收入堆栈溢出收入堆栈溢出
文本的输出可以与区域外重叠，也可以与下一个svg元素重叠。因此，我想说明文本是否与另一个元素重叠，或者是否需要执行修剪操作

示例：Revenue stackove…

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

 div {
                border: 2px solid #a1a1a1;
                padding: 10px 40px; 
                background: #dddddd;
                width: 300px;
                height : 300px;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis; 
            }
不，我需要像这样展示收入斯塔克夫…（…）你应该清楚地写下你的问题，这样其他人可以帮助你。