如何找出此CSS值的来源?

时间:2018-01-12 16:40:31

标签: css twitter-bootstrap debugging google-chrome-devtools twitter-bootstrap-tooltip

我正在尝试使用bootstrap工具提示来处理它可能没有设计的东西,即显示相当大的文本的可能性。我设法根据我的需要调整它,但有一个例外。显示的文本框的宽度太窄,除非我将其设置为固定宽度,但在显示我的短文本时它看起来非常愚蠢。我确实覆盖了200px的标准最大宽度,但它仍然不会显示甚至超过120.797px

我试着做一个简单的简单例子,令我惊讶的是,它在我的小提琴中完美无缺。如果没有设置width属性,它仍会增长到800px,如max-width中所设置的那样。所以我试图弄清楚我的简单小提琴和我的大网页之间有什么不同。我使用google chrome dev-tools向我展示了所有set css属性,因为我预计会有一些未知来​​源影响width。通常,由css设置的所有属性都会在每个属性的左侧显示一个箭头,告诉您确切的位置,以及通过哪个文件和选择器语句设置此属性。这是我发现的:

enter image description here

因此,每个其他属性都提供了参考,而宽度仍然是一个神秘的未知。请注意,字体颜色为深红色。如果这是从其他属性计算的,通常会褪色。我试图研究这可能意味着什么,但官方文件没有留下任何线索。 This page was the closest thing I could find

如何找出此CSS值的来源?

Here is a link to the fiddle。工具提示文本是今天的随机新闻来源,挪威语。根据Stackoverflow规则,下面的代码:

HTML:

<span class="nav-text" data-toggle="tooltip" data-placement="right" title="" data-original-title="– Vi har nok satt oss litt i respekt i dag for de andre nasjonene. De vet nå at vi ikke er uredde og ikke er redd for å bare gå fra dem i front, sa Johannes Thingnes Bø om den solide seieren.

For da Emil Hegle Svendsen sendte Johannes Thingnes Bø ut på den siste etappen sammen med franske Antonin Guigonnat og italienske Therry Chenal var det mye som skulle gå galt for at ikke stryningen skulle sikre norsk stafettseier.

Og stryningen gikk knallhardt ut og viste konkurrentene ryggen allerede i den første motbakken.

– Jeg er ganske trygg og selvsikker når jeg går ut på siste etappe, sa ankermannen til NRK etter målgang.

En god generalprøve før OL
Det var et godt fornøyd stafettlag etter seieren. Stafetten i Ruhpolding var den store generalprøven for det som skal være det norske OL-laget i Pyeongchang i februar.

– Det var en god følelse. Jeg tar gjerne samme løpsopplegg neste gang det er stafett, sa Thingnes Bø etter seieren med et klart hint til stafetten i OL.">
    Hover for tooltip
</span>

CSS:

div.tooltip{
    top:0px !important;
}

div.tooltip>div.tooltip-arrow{
    top:15px !important;
}

div.tooltip>div.tooltip-inner{
    max-width:800px !important;
    white-space: pre-wrap;
    text-align: left;
}

引导工具提示的标准init,javascript:

$('[data-toggle="tooltip"]').tooltip();

0 个答案:

没有答案