javascript - 单行放置 float 元素时如何获取内联元素的宽度

Question

我想获得内联元素的确切宽度，即 p 标签宽度。根据 dom，它显示的是 600px，但它不是根据文本呈现方式的实际宽度。

如何获得 p 标签的适当宽度，即 float div 使用的跳过宽度。

这是我的html结构

<div id="parent">
	<div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;">
		Floating div
	</div>
    <div id="child">
        <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p>
    </div>
</div>

jsFiddle link

我只想借助 java 脚本来实现此目的。

欢迎提出任何建议，感谢您的帮助。

Answer 1

    var parentWidth = $("#parent").width(); 
    var floatDivWidth = $("#floating").width();
    var pWidth = parentWidth-floatDivWidth; //width of <p> tag
    
    alert(pWidth);

#parent {
    width: 600px;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
	<div id="floating" style="display: block;width: 170px;height: 80px;float: right;background-color: red;">
		Floating div
	</div>
    <div id="child">
        <p id="p1">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long </p>
    </div>
</div>

https://jsfiddle.net/q98L4hqu/1/