Add all these.
To make in single line.

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width:100px; // some width

To do in multi line which actually you asked.

    #content{
    overflow: hidden;
    width:100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }

working fiddle:
https://jsfiddle.net/mishrarajesh/676jc7sa/

Please note that this multiline code is supported only in web-kit browsers for now.

I am working on Windows 10. I want to run a &quot;make build&quot; in MINGW64 but following error comes up:

    $ make build
    bash: make: command not found

I want to build [Glide for Golang][1]

I tried following:

    $ sudo yum install build-essential
    bash: sudo: command not found
As well as:

    $ yum install build-essential
    bash: yum: command not found
And:

    $ apt-cyg build-essential
    bash: apt-cyg: command not found

How can I &quot;work-around&quot; this problem?


  [1]: https://github.com/Masterminds/glide &quot;Glide for Golang&quot;



MINGW64 &quot;make build&quot; error: &quot;bash: make: command not found&quot;

This question is not a duplicate of (https://stackoverflow.com/questions/27844127/swagger-specify-optional-object-property-or-multiple-responses) because that OP was trying to return a 200 or a 400. 

I have a `GET` with an optional parameter; e.g., `GET /endpoint?selector=foo`. 

I want to return a 200 whose schema is different based on whether the parameter was passed, e.g.,:

    GET /endpoint -&gt; {200, schema_1}
    GET /endpoint?selector=blah  -&gt; {200, schema_2}

In the yaml, I tried having two 200 codes, but the viewer squashes them down as if I only specified one. 

Is there a way to do this?

Edit: the following seems related: https://github.com/OAI/OpenAPI-Specification/issues/270

Swagger; specify two responses with same code based on optional parameter

How can I show three dots(...) in a text like this?
[![like this?][1]][1]


  [1]: http://i.stack.imgur.com/srdbx.png

how to add three dots to text when overflow in html?

<p>How can I show three dots(...) in a text like this?
<a href="http://i.stack.imgur.com/srdbx.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/srdbx.png" alt="like this?"></a></p>


I try to add a **caret down icon** to the first selection of several options as shown on the picture below:

[![enter image description here][1]][1]

here is a [Fiddle][2] with my example. 

I can&#39;t get the icon to be visible on the Fiddle above.

And the corresponding code:

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .wrapper {
      height: 200px;
      background-color: red;
      padding-top: 100px;
      padding-left: 150px;
    }
    #before-select {
      font-size: 30px;
      color: #ffffff;
    }
    select {
      border: none;
      background: transparent;
      /*background-color: blue;*/
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 180px;
      padding-top: 0px;
      background-size: 20px;
      color: #ffffff;
      font-size: 30px;
    }
    select option {
      color: #424146;
      background: #ffffff;
    }

&lt;!-- language: lang-html --&gt;

    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot; /&gt;

    &lt;div class=&quot;wrapper&quot;&gt;

      &lt;form role=&quot;form&quot;&gt;
        &lt;span id=&quot;before-select&quot;&gt;in&lt;/span&gt;

        &lt;select name=&quot;town&quot;&gt;
          &lt;option value=&quot;London&quot;&gt;London &lt;i class=&quot;fa fa-caret-down&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
          &lt;/option&gt;
          &lt;option value=&quot;Paris&quot;&gt;Paris&lt;/option&gt;
          &lt;option value=&quot;Madrid&quot;&gt;Madrid&lt;/option&gt;
        &lt;/select&gt;


      &lt;/form&gt;


    &lt;/div&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;



 


  [1]: http://i.stack.imgur.com/NZ8bB.png
  [2]: https://jsfiddle.net/wwut6apr/30/

Font Awesome icon in select option

On my Samsung Galaxy tab 4 (Android 4.4.2, Chrome: 49.0.2623.105) I ran into a situation where the keyCode is always 229. 

I&#39;ve setup a simple test for two situation

    &lt;div contenteditable=&quot;true&quot;&gt;&lt;/div&gt;
    &lt;input&gt;
    &lt;span id=&quot;keycode&quot;&gt;&lt;/span&gt;

script:

    $(&#39;div, input&#39;).on(&#39;keydown&#39;, function (e) {
        $(&#39;#keycode&#39;).html(e.keyCode);
    });
    

[DEMO][1]

Fortunately I can find posts about this, but I couldn&#39;t find one with a working solution. Someone suggested to use `keyup` instead or to use the `textInput` event, but that one is only fired on `blur`.

Now, to top it all, this doesn&#39;t happen with the default stock browser :(

Any help would be appreciated!

UPDATE: If it turns out that this is not possible I can still grab the char before the caret: [post][2]



  [1]: https://jsfiddle.net/ztu9d9j3/3/
  [2]: https://stackoverflow.com/questions/15157435/get-last-character-before-caret-position-in-javascript

keyCode on android is always 229

I am trying to use python and beautiful soup to extract the content part of the tags below:

    &lt;meta property=&quot;og:title&quot; content=&quot;Super Fun Event 1&quot; /&gt;
    &lt;meta property=&quot;og:url&quot; content=&quot;http://superfunevents.com/events/super-fun-event-1/&quot; /&gt;

I&#39;m getting BeautifulSoup to load the page just fine and find other stuff (this also grabs the article id from the id tag hidden in the source), but I don&#39;t know the correct way to search the html and find these bits, I&#39;ve tried variations of find and findAll to no avail. The code iterates over a list of urls at present...


    #!/usr/bin/env python
    # -*- coding: utf-8 -*-
    
    #importing the libraries
    from urllib import urlopen
    from bs4 import BeautifulSoup
    
    def get_data(page_no):
        webpage = urlopen(&#39;http://superfunevents.com/?p=&#39; + str(i)).read()
        soup = BeautifulSoup(webpage, &quot;lxml&quot;)
        for tag in soup.find_all(&quot;article&quot;) :
            id = tag.get(&#39;id&#39;)
            print id
    # the hard part that doesn&#39;t work - I know this example is well off the mark!        
        title = soup.find(&quot;og:title&quot;, &quot;content&quot;)
        print (title.get_text())
        url = soup.find(&quot;og:url&quot;, &quot;content&quot;)
        print (url.get_text())
    # end of problem

    for i in range (1,100):
        get_data(i)

If anyone can help me sort the bit to find the og:title and og:content that&#39;d be fantastic!

Get meta tag content property with BeautifulSoup and Python

I made a website where if the user clicks, it plays a sound. To prevent the sound from overlapping, I had to add the code: 

    n.pause();
    n.currentTime = 0;
    n.play();

But that causes the error:
`The play() request was interrupted by a call to pause()`
&lt;br /&gt; To come up each time the sound event is triggered right after another trigger. The sounds still plays fine, but I want to prevent this error message constantly popping up. Any ideas?



How to prevent &quot;The play() request was interrupted by a call to pause()&quot; error?

I&#39;m having an issue with flexbox on IE11 and while I&#39;m aware there&#39;s lots of known issue, I haven&#39;t been able to find a solution...

    &lt;div class=&quot;latest-posts&quot;&gt;
        &lt;article class=&quot;post-grid&quot;&gt;
            &lt;img src=&quot;http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg&quot; alt=&quot;&quot; /&gt;
            &lt;div class=&quot;article-content&quot;&gt;
                 &lt;h2&gt;THIS IS POST TITLE&lt;/h2&gt;
                 &lt;p&gt;BLAH&lt;/p&gt;
            &lt;/div&gt;
        &lt;/article&gt;
    &lt;/div&gt;

And the CSS...


    img {
      max-width: 100%;
    }

    .latest-posts {
      margin: 30px auto;
    }

    article.post-grid {
      width: 375px;
      float: left;
      margin: 0 25px 100px 0;
      padding-bottom: 20px;
      background-color: #fff;
      border: 1px solid #f3f3f3;
      border-radius: 2px;
      font-size: 14px;
      line-height: 26px;
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      justify-content: flex-start;
      align-content: flex-start;
    }
    .article-content {
      padding: 20px 35px;
    }

Images are getting stretched within a flex container.

[![enter image description here][2]][2]

 Applying `align-items: flex-start` (I figured, since &quot;stretched&quot; is the default value...) or `justify-content: flex-start` doesn&#39;t seem to work.

Codepen: [example of what I mean][1]

What am I doing wrong?


  [1]: http://codepen.io/anon/pen/bpjJvg
  [2]: http://i.stack.imgur.com/6etI6.jpg

Flexbox on IE11: image stretched for no reason?

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.

How do I add a color-overlay to a background image using CSS only?

Example HTML:

    &lt;div class=&quot;testclass&quot;&gt;
    &lt;/div&gt;

Example CSS:

    .testclass {
        background-image: url(&quot;../img/img.jpg&quot;);
    }

Please note:

 - I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div &quot;testclass&quot; for the color overlay.

 - This should not be a &quot;hover effect&quot; I want to simply just add a color-overay to the background image.

 - I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.

 - I am looking for just one color, lets say black. Not a gradient.


Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this? 

All suggestions and advice are appreciated!

  

How to add a color overlay to a background image?

I&#39;m making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.

I&#39;m making a grid of 4 columns each containing a pie chart, however the scaling in v2 is sort of confusing for me to get working. I want the charts to be responsive so they scale properly with the smaller devices such as tablets and smartphones, and one of my problems is getting rid of the legend of the charts as well as the hover information when hovering the mouse over the sections of my chart.

#index.html

    &lt;body&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-xs-3&quot;&gt;
                    &lt;canvas id=&quot;chart1&quot;&gt;&lt;/canvas&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;

#functions.js

    $(document).ready(function(){
        var canvas = $(&quot;#chart1&quot;);
        var data = {
            labels: [],
            datasets: [{
                data: [10, 10],
                backgroundColor: [&quot;#F7464A&quot;, &quot;#FDB45C&quot;],
                hoverBackgroundColor: [&quot;#FF5A5E&quot;, &quot;#FFC870&quot;]
            }]
        };

        var chart1 = new Chart(canvas, {
            type: &quot;pie&quot;,
            data: data,
        });
    });

If I remove the empty &quot;labels&quot; field the chart doesn&#39;t work anymore. And by the looks of it there is a small spacing at the top of the chart which could indicate that the headers are written, but they are just empty strings.

Does anyone have an idea of how to remove the legend, and the hover description? I simply can&#39;t get my head around how this is used

I will get my hands around a jsfiddle as soon as I get time!

EDIT: Link to the docs: [https://nnnick.github.io/Chart.js/docs-v2/#getting-started][1]


  [1]: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

Removing legend on charts with chart.js v2

my question is pretty simple. I&#39;m working on a page on mobile version, and we want to keep the &quot;snag it&quot; yellow button fixed on bottom, but position fixed is not working, it&#39;s working like position absolute and i don&#39;t know why.

The page i&#39;m working: https://www.thechivery.com/products/everything-is-j-ok-tee

Thanks,
Luiz

Content Type	Original Author	Original Content on Stackoverflow
Question	Jonathan Ivgi	View Question on Stackoverflow
Solution 1 - Html	rajesh	View Answer on Stackoverflow

how to add three dots to text when overflow in html?

Html Problem Overview

Html Solutions

Solution 1 - Html

Swagger; specify two responses with same code based on optional parameter

MINGW64 "make build" error: "bash: make: command not found"

Attributions