CSS3 макет колонки делят один элемент на две части

Question

Вот моя jsfiddle проблема демо: https://jsfiddle.net/icewind/w3ugftup/

.col-wrapper { 
 
    background-color: #efefef; 
 
    color: #444; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
    -webkit-column-width: 220px; 
 
} 
 
.remark{ 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
.remark:after{ 
 
    content: '.'; 
 
    position: absolute; 
 
    bottom: -17px; 
 
    left: 50%; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div class="col-wrapper"> 
 
    <p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p> 
 
    <p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p> 
 
    <p>A slight rustle, and the fugitive comes forth; a quick, sharp, resolute motion, and the cat has proved its usefulness. Let any one have a plague of rats and mice, as I <span class="remark">once</span> had, and let them be delivered therefrom by cats, as I was, and they will have a lasting and kind regard for them.</p> 
 
    <p>A friend not long since informed me that a cat at Stone's Distillery was seen to catch two rats at one time, a fore foot on each. All the cats kept at this establishment, and there are several, are of the red tabby colour, and therefore most likely all males.</p> 
 
</div>

При использовании CSS3 макет колонки, как демо, и я добавить закладку к слово, которое оказалось в нижней части столбца, иногда значок закладки делится на две части макетом columb.

Я попытался использовать «break-inside: avoid;»; и «break-before: avoid;» css, но, похоже, это не работает.

Есть ли какие-либо решения по моей проблеме?

Answer 1

К сожалению, слово «один раз» находится не на одной линии, но это единственный способ узнать. Ралли не просто просто взгляните.

1. Ну, в Html&nbsp как так <span class="remark">once&nbsp</span>

2. Для Css в .col-wrapper добавить -webkit-column-width: 220px; -moz-column-width: 150px; column-width: 150px; для браузеров совместимости и изменить отступы к padding:15px 27px 15px 27px;.

3. В замечании: после {} изменения и добавить эти коды { bottom: -7px;left: 1%;width: 33px;height: 10px; background: url("http://www.stat.ncsu.edu/dept-icons/camera-icon.gif") no-repeat center bottom;}

4. Добавить .col-wrapper > p {line-height: 19.5px;} .remark { background-color: yellow; position: relative; bottom: 4px;}

.col-wrapper { 
 

 
    background-color: #efefef; 
 

 
    color: #444; 
 

 
    border-radius: 5px; 
 

 
    -webkit-column-width: 220px; 
 

 
    -moz-column-width: 150px; 
 

 
    column-width: 150px; 
 

 
    padding: 15px 27px 15px 27px; 
 

 
} 
 

 
.remark:after { 
 

 
    content: '.'; 
 

 
    bottom: -7px; 
 

 
    left: 1%; 
 

 
    width: 33px; 
 

 
    height: 10px; 
 

 
    position: absolute; 
 

 
    background: url('http://www.stat.ncsu.edu/dept-icons/camera-icon.gif') no-repeat center bottom; 
 

 
} 
 

 
.col-wrapper > p { 
 

 
    line-height: 19.5px; 
 

 
} 
 

 
.remark { 
 

 
    background-color: yellow; 
 

 
    position: relative; 
 

 
    bottom: 4px; 
 

 
}

<div class="col-wrapper"> 
 
    <p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, 
 
    meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p> 
 
    <p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p> 
 
    <p>A slight rustle, and the fugitive comes forth; a quick, sharp, resolute motion, and the cat has proved its usefulness. Let any one have a plague of rats and mice, as I <span class="remark">once&nbsp</span>had, and let them be delivered therefrom by cats, 
 
    as I was, and they will have a lasting and kind regard for them.</p> 
 
    <p>A friend not long since informed me that a cat at Stone's Distillery was seen to catch two rats at one time, a fore foot on each. All the cats kept at this establishment, and there are several, are of the red tabby colour, and therefore most likely 
 
    all males.</p> 
 
</div>

Возможно, вам потребуется изменить некоторые пиксели в соответствии с вашим маленьким значком. Если у вас есть какие-либо вопросы, дайте мне знать.

Answer 2

Это действительно интересный вопрос с CSS. Я работаю над решением, тем временем предлагаю вам временное решение. Вместо того, чтобы показывать закладку внизу, я переместился на верх.

.remark:after{ 
    content: '.'; 
    position: absolute; 
    top: -17px; 
    left: 20%; 
    width: 20px; 
    height: 20px; 
    display: block; 
    background-color: red; 
    opacity:.5; 
}