CSS - 創建文本空盒旁邊文本中的段落

我有這些類：CSS - 創建文本空盒旁邊文本中的段落

.p_box { 
    position: relative; 
} 

.p_box span { 
    background-color: white; 
    padding-right: 10px; 
} 
.p_box:after { 
    content:""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    height: 20px; 
    border: 1px solid black; 
    z-index: -1; 
}

但它並沒有真正發揮作用。我使用了類似的風格：text _____，它工作。但對於盒子，它看起來並不是我需要的方式。

我需要它看起來就像這樣（想象它是有邊界空箱）：

some text: |---------| 
      |---------|

在這裏，你可以看到它看起來像使用造型：https://jsfiddle.net/envLpanh/

正如你所看到的在示例中，邊框的上邊線隱藏在文本所在的位置，但較低的一行不是。同樣在我的應用程序中，它看起來有點不同於jsfiddle。上邊框和下邊框都隱藏在文本所在的位置，但左邊框爲空，它看起來像這樣：

some text: -------| 
      -------|

P.S.我猜它看起來是這樣，因爲它只是隱藏了一部分框，然後看起來左邊框消失了。所以也許有一些更好的方法。

更新

爲了更好地理解我需要什麼，看這樣的畫面：

使空箱應該出現這樣的事情：

<p class="p_box">Test:</p>再經過字Test，會出現空框。

UPDATE2

使用left: fixed px number;沒有完全工作液，因爲它總是使用固定的左側位置，如果文本在每種情況不同，會顯得凌亂。像這樣的例子：https://jsfiddle.net/envLpanh/8/

來源

2015-08-25 Andrius

你想要得到這樣的東西嗎？：https://jsfiddle.net/envLpanh/3/ –

那麼最新的問題是什麼？ – Vucko

你的問題到底是什麼？ @Andrius – TheLuminor

我曾在CSS以下變化得到this effect (fiddle here)

.p_box { 
     position: relative; 
    } 

    .p_box span { 
     background-color: white; 
     padding-right: 10px; 
     display: table-cell; 
     min-width: 200px; 
    } 
    .p_box:after { 
     content:""; 
     display: table-cell; 
     width: 100%; 
     height: 20px; 
     border: 1px solid black; 
     z-index: -1; 
    }

您可以使用min-width:設置最小寬度爲.p_box span，也可以刪除最小寬度。如果你刪除的文字將工作中斷。所以我希望使用min-width是適當的解決方案。

來源

2015-08-25 12:56:26 Masoom

你是否在找它？

.p_box:after { 
    left: 90px; 
}

來源

2015-08-25 11:36:39 HoomanMns

這將是好的，但它不考慮文字的長度。我的意思是如果我會寫更長的時間然後測試，它會再次重新開始。 – Andrius

我明白這裏是我的嘗試，你想要的東西在的jsfiddle

 .p_box { 
 
      position: relative; 
 
     } 
 

 
     .p_box span { 
 
       background-color: white; 
 
    padding: 5px;   //updated 
 
    padding-right: 10px;  //updated 
 
    line-height: 20px;  //updated 
 
     } 
 
     p.p_box:after{ 
 
      left:110px;  
 
     } 
 
     .p_box:after { 
 
      content:""; 
 
      position: absolute; 
 
      bottom: 0; 
 
      left: 0; 
 
      right: 0; 
 
      top: 0; 
 
      height: 20px; 
 
      border: 1px solid black; 
 
      z-index: -1; 
 
     }

<body> 
 
    <p class="p_box"><strong><span>Something:</span></strong></p> 
 
</body>

結帳...

Updated DEMO code

更新代碼使用jQuery：

$(document).ready(function(){ 
 
\t var text_block_width = $('.p_box strong span').outerWidth(true); 
 
    debugger; 
 
    console.log(text_block_width); 
 
    $('p.p_box').append('<style>p.p_box:after{left:'+text_block_width+'px}</style>'); 
 
})

 .p_box { 
 
      position: relative; 
 
      width;100%; 
 
     } 
 

 
     .p_box span { 
 
       background-color: white; 
 
    padding: 5px;   //updated 
 
    padding-right: 10px;  //updated 
 
    line-height: 20px;  //updated 
 
     } 
 
     .p_box:after { 
 
      content:""; 
 
      position: absolute; 
 
      bottom: 0;   
 
      left: 0; 
 
      right: 0; 
 
      top: 0; 
 
      height: 20px; 
 
      border: 1px solid black; 
 
      z-index: -1; 
 
     }

<body> 
 
    <p class="p_box"><strong><span>hsdjfsdjfsdfjsdfjsdfjsdf blablallll:</span></strong></p> 
 
</body>

DEMO工作代碼

CHeck out code

來源

2015-08-25 11:37:09

那麼它仍然隱藏左邊界。正如你可以看到它看起來像一個沒有「牆」的箱子。我需要它，它不會隱藏任何邊界 – Andrius

@ Andrius那麼你需要左側定位到包含邊框的元素，只有這樣才能達到那個效果 –

更新後的答案可能是好的，但它運行的問題相同與Hoomanhpc2的答案一樣。如果我會寫更長的文本，它會搞砸了。像這樣：https：//jsfiddle.net/envLpanh/8/。 CSS不知何故將需要通過查看文本長度或某事來知道「左」長度應該是多少。那麼這種方法就行得通了。 – Andrius

您是否在尋找這個

Demo Link

以下是改變CSS代碼

.p_box:after { 
content:""; 
position: absolute; 
bottom: 0; 
left: 100px; 
right: 0; 
top: 0; 
height: 20px; 
border: 2px solid black; 
z-index: -1;

}

來源

2015-08-25 11:46:22

看看我在Himesh Aadeshara提到的問題的答案。這裏也是一樣。 – Andrius

CSS - 創建文本空盒旁邊文本中的段落

回答

相關問題